1.文档流
文档流时整个页面的最底层，在页面中创建元素时默认情况下都在文档流。
元素在文档流里面的特点：
块元素：1）块元素在文档流里会独占一行，块元素会自上向下垂直排列；2）块元素在文档流中默认宽度是父元素的100%；3）块元素在文档流中的高度默认被内容（子元素）撑开；
内联元素：1）内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行不足以容纳所有的内联元素，则换到下一行，继续自左向右；2）在文档流中，高度和宽度会默认被子元素内容撑开。
当元素的宽度设置为auto时，此时指定内边距不会影响可见框的大小，而是自动修改宽度，以适应内边距。
2.浮动
块元素在文档流中默认垂直排列，所以如果设置三个div自上而下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流。使用float来使元素浮动，从而脱离文档流，改变其在页面中的排列方式。
可选值：none ，默认值元素在文档流中
right ，元素向左浮动
left ，元素向右浮动
1）当元素开启了浮动之后，元素会立即脱离文档流，并且向页面的左上或右下移动，直到遇到父元素的边框或者其他的浮动元素时，则停止移动；
2）如果浮动的元素上面是一个没有浮动的块元素，则浮动元素不会超过该块元素，如果一行不足以容纳所有的浮动元素，则会自动换到下一行；
3）浮动元素不会超过它上边的浮动的兄弟元素，最多一边齐。
4）浮动会使元素完全脱离文档流；
块元素：1）块元素脱离文档流以后，不再独占一行；
2）块元素脱离文档流以后，默认宽度和高度都被内容撑开
内联元素：1）内联元素脱离文档流以后，会变成块元素。
3.定位
定位：定位是一种高级的布局手段，通过定位可以将元素摆放到页面的任意位置，需要通过position属性来设置元素的定位。
可选值：
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位
相对定位：当元素的position设置为relative时，则开启了元素的相对定位。
特点：1）当开启了相对定位，而不设置偏移量，元素不会发生任何变化。
2）相对定位是相当于元素自身在文档流中的位置来进行定位的。
3）相对定位不会使元素脱离文档流。
4）相对定位不会改变元素的性质，块还是块，内联还是内联。
5）相对定位可以使元素提升一个层级。
层级：文档流 < 浮动 < 定位
偏移量：当元素开启了定位以后（position是非static的值），可以通过四个偏移量来设置元素的位置：
top 当前元素距离其定位元素的顶部的距离
right 当前元素距离其定位元素的右侧的距离
bottom 当前元素距离其定位元素的底部的距离
left 当前元素距离其定位元素的左侧的距离
一般情况下，四个偏移量只需要使用两个即可确定一个元素的位置，一个水平的，一个垂直的：top left/top right/bottom left/bottom right
绝对定位：将元素的position属性设置为absolute即可开启绝对定位
特点：1）开启绝对定位以后，如果不设置偏移量，元素的位置不会发生变化。
2）绝对定位相对于离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进行定位。所以一般我们为一个子元素开启定位，同时也会开启其父元素的相对定位。
3）绝对定位会使元素完全脱离文档流。
4）绝对定位会改变元素的性质，块元素的默认宽度和高度被内容撑开，内联元素变成块元素。
5）绝对定位会提升元素的一个层级。
固定定位：将position属性值设置fixed则开启了元素的固定定位。固定定位也是一一种绝对定位，大部分的特点都和绝对定位相同。不同的是固定定位的元素永远相对于浏览器窗口进行定位，而且固定定位的元素不会随滚动条滚动。
4.z-index
当元素开启了定位以后，可以通过z-index来设置元素的层级，z-index需要一个整数作为参数，值越大层级越高。当两个元素发生重叠时，z-index值越大越优先显示，z-index值相同的优先显示下边的元素。