css的布局模型分为流动模型(Flow)、浮动模型(Float)、层模型(Layer)。
浮动模型(Float)和层模型(Layer)有什么显著区别?
浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动;浮动的元素仍然会占据文档流的物理空间。关于浮动模型的详细说明请看另一篇文章的介绍。http://ycgit.blog.51cto.com/8590215/1958452
层模型(Layer):设置为层模型的元素已从文档流删除,在文档流上层一层层覆盖,写在后面的层模型元素会覆盖前面层模型元素,层模型元素的定位与文档流无关,只基于带有定位属性(relative、absolute)的元素或视窗;
position的relative、absolute与fixed区别?
这三个定位属性是属于层模型的三种体现形式,另外任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框(有块级元素特性,但不占整行),而不论该元素本身是什么类型。
使用区别
relative 相对定位,以自己当前处于文档流的位置为基准设置偏移量,所以自身在文档流会保持占有固定的物理空间,并且物理空间的位置只受文档流的影响,而不受自身设置偏移量(top/left这些)影响,注意自身设置了margin这类非定位属性也一样改变其在文档流的物理位置。
absolute 绝对定位,是相对于设置了position为relative或者absolute最近的父级元素定位(body、html标签也需要定位属性才能作为定位父级),如果没有就是基于视窗定位,不占文档流的物理空间。
fixed 固定定位,是相对于浏览器视窗的,不占文档流的物理空间。