文档流，定位

概念：html元素在页面上从上到下依次排列，就是文档流。

1.盒子模型

    html元素构成：内容(content)、填充(padding)、边框(border)、边界(margin)

    由这些元素构成一个盒子

2.CSS的定位机制有3种：

    普通流、

    浮动（float：left/right/none）

    定位 （position:static/relative/absolute/fixed/inherit）

Static：默认定位方式，保持文档流。

Relative：相对本身的原始位置发生位移且保持文档流，占空间。

Absolute：脱离文档流，不占空间且相对于其父元素来定位。

fixed：脱离文档流，不占空间且相对于其window窗体来定位。

inherit: 继承父类的定位方式

加定位属性脱离文档流后，不可再恢复。

3.浮动

    浮动后元素脱离文档流，过通过清楚浮动的方式恢复文档流。