(流动)Flow模型:网页默认布局模型
特征:
第一点:块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
第二点:在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。
浮动模型float
可以实现块状元素并排显示。
任何元素在默认情况下是不能浮动的,但可以用css定义为浮动。
如div 、p、table、img等元素都可以被定义为浮动。
浮动模型可以是apdiv,并且可以在设计视图拖动来改变位置
.box {
width: 100px;
height: 100px;
background-color: #FF0004;
position: absolute;
left: 561px;
top: 185px;
}
(position: absolute:绝对定位)
apdiv
层模型
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。css定义了一组定位(positioning)属性来支持层布局模型。
层模型有三种形式:
- 绝对定位(position: absolute)
对于body的绝对位置
- 相对定位(position: relative)
相对于原来的位置再改变位置
- 固定定位(position: fived)
相对于浏览器窗口固定定位(例如网页弹窗广告)
fived 固定定位
.box2 {
width: 100px;
height: 200px;
background-color:#0084E9;
position: fixed;
right: 1px;
top: 200px;
}
相对定位,相对于父级
父级为relative
子级为absolute