你的位置:首页 > 软件开发 > 网页设计 > css细节复习笔记——浮动

css细节复习笔记——浮动

发布时间:2015-04-03 18:00:38
CSS除了能够改变字体、背景和所有其他属性,还能够完成基本布局任务。div+css通过浮动和定位、盒子模型等技术应用,是最常用的布局方式。定位的基本思想很简单,它允许定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素,另一个元素甚至浏览器窗口本身的位置。另一方面,css1 ...

css细节复习笔记——浮动

CSS除了能够改变字体、背景和所有其他属性,还能够完成基本布局任务。

div+css通过浮动和定位、盒子模型等技术应用,是最常用的布局方式。

定位的基本思想很简单,它允许定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素,另一个元素甚至浏览器窗口本身的位置。

另一方面,css1提出浮动。浮动不完全是定位,不过,他当然也不是正常流布局。

 

浮动

声明<img src ="b5.jpg" align="right">会导致一个图像浮动到右边,而允许其他内容(文本)“围绕”该图像。css允许浮动任何元素,从图像到段落再到列表,所有元素都可以浮动,使用属性float实现。

因此,上述代码还能写作<img src ="b5.jpg" >。

 

浮动元素

对于浮动元素,有几点要记住。首先,会以某种方式将浮动元素从文档的正常流中删除,影响布局。一个元素浮动是,其他内容会“环绕”该元素。

注意,浮动元素周围的外边距不会合并。如果浮动一个有20像素外边距的图像,在这个图像将至少有20像素的空间。如果其他元素与此图像响铃,而且都有外边距,那么这些外边距不会与浮动图像的外边距合并。

如果确实要浮动一个非替换元素,则必须为该元素声明一个width,否则,浮动段落可能只有1个字符宽。

不浮动

除了left和right外,float属性还有一个值。float:none用于防止元素浮动。也许不会认为,如果让一个元素不浮动,就不声明float,实际上,要得到正常的非浮动元素,必须有这个值,不然所有元素都会以某种方式浮动。

 

浮动的详细内幕

深入讨论浮动的详细内容之前,首先要建立包含块的概念。浮动元素的包含块是最近的块级祖先元素。因此,在以下标记中,浮动元素的包含块就是包含该浮动的段落元素:

<h1>Test</h1> <p><img src ="U54.jpg" style ="float:right;border:1px solid #000">   This is paragraph text,but you knew that. Whthin the content of this paragraph id an image that's been floated.The containing block for the floated image is the paragraph.</p>

原标题:css细节复习笔记——浮动

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。