css包含3种基本的布局模型即为元素的3中布局模型,分别为 Flow/Float/Layer
Flow(流动模型)
标准文档流方式，元素从上至下，从左至右！是默认的网页布局方式
特点
- 块状元素占据单独的一行，从上至下排列
- 内联元素会从左至右排列
Float(浮动模型)
网页元素可通过设置float属性值浮动，利用浮动特性布局
Layer(层模型)
设置网页元素position来支持层布局模型
position: static
position 默认值,网页元素仍然处于标准文档流中,占据文档流中的位置
position: relative
特点：
- 相对于自身原有位置进行偏移
- 仍然处于标准文档流中
- 随即拥有偏移属性和z-index 属性
position: absolute
特点：
- 建立了以包含块为基准的定位（包含块为距离其最近设置了定位属性的上级元素,
若无定位祖先元素，则以HTML元素为定位元素） - 完全脱离了标准文档流
- 随即拥有偏移属性和 z-index 属性
- 未设置偏移量时，无论是否存在已定位祖先元素，都保持在元素初始位置
position: fixed
特点：
- 完全脱离标准文档流
- 随机拥有偏移属性和 z-index 属性
- 无论有无已定位祖先元素，均以浏览器窗口为偏移参照基准
- 位置固定，不会随滚动条变化
- 未设置偏移量时，仍然在标准文档流原位置
网友评论