流动模型
流动是默认的网页布局格式,默认情况下HTML元素都根据该模式来分布网页内容。
该模型下有两个特征元素
块状元素
顾名思义,他是一个方块,
- 块状元素在默认情况下于包含元素中自上而下垂直排布。
- 默认情况下,宽度为100%,所以实际上块状元素都独占一行。
高度宽度、行高以及顶和底边距都可设置。
内联元素(行内元素)
- 内敛元素会在所处的包含元素中自左到右水平分布显示。
- 和其他元素都在一行上
- 元素的宽度、高度及顶和底边距不可设置
内联块状元素
当元素被设置position:absolute;
float:left; float:right;
时,元素的display
显示类型就是自动变成inline-block
,以块状形式显示。
聚集了内联和块状的特性。
- 可以和其他元素在同一行上
- 元素的宽度高度、行高以及顶和底边距都可设置。
层模型
顾名思义,该模型就是一层一层的。类似与photoshop中图层的定义。
可以让元素在网页中精准定位
CSS中定义了一组定位属性来支持层布局模型
- 绝对定位(position:absolute;
)
- 相对定位(position:relative;
)
- 固定定位(position:fixed;
)
绝对定位
将元素从文档流中拖出来,然后用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块,则相对于body元素。(即相对于浏览器窗口)。
此处的
left
、right
、top
、bottom
的意思是margin-left
、margin-right
、margin-top
、margin-bottom
相对定位
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮起来),然后相对于以前的位置移动,移动的方向还是由left
、right
、top
、bottom
属性决定。
偏移前的位置保持不变,即不影响后续元素的位置。因为相对定位的元素实际上还在标准文档流中原有位置,别的元素无法占据。
固定定位
与绝对定位absolute
相似,但是它的相对移动坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,所以他不随浏览器窗口的滚动条的滚动而变化。
典型应用:网页中右下角的小广告
relative和absolute结合使用
一般情况下,相对定位和绝对定位相结合。但是需要遵循以下规范:
- 参照定位的元素必须是相对定位元素的前辈元素
- 参照定位的元素必须加入position:relative;
- 定位元素加入position:absolute;
使用left
、right
、top
、bottom
来进行偏移定位。
浮动模型
利用float:left/right;
让元素脱离标准文档流,处于一种浮动的状态。该元素后边的普通元素位置会上移。