【CSS布局模型】流动模型、浮动模型、层模型

流动模型

流动是默认的网页布局格式，默认情况下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;让元素脱离标准文档流，处于一种浮动的状态。该元素后边的普通元素位置会上移。