布局简介、display(水平居中、居中导航)、position(轮播头图、固定顶栏、遮罩、三行自适应布局)、float(两列布局)、flex(三行两列自适应)
布局：浏览器将元素以正确的大小摆放在正确的位置上。
布局：元素摆放的模式
1.4.6.1 display
display
- 设置元素的显示方式
- display:block|inline|inline-block|none
display:block
- 默认宽度为父元素的宽度
- 可设置宽高
- 换行显示
- 默认display:block元素－div,p,h1-h6,ul,form
display:inline
- 默认宽度为内容宽度
- 不可设置宽高
- 同行显示
- 默认display：inline元素－span，a，label，cite，em，…
display:inline-block
- 默认宽度为内容宽度
- 可以设置宽高
- 同行显示
- 整块换行
- 默认display：inline-block元素－input,text area,select,button,…
display:none
- 设置元素不显示
- 与visibility:hidden区别
1.4.6.2 position
定位
- position－设置定位方式
- top,right,bottom,left,z-index－设置位置
top/right/bottom/left
设置元素边缘距离参照物边缘的距离
z-index
在z轴上的排序
z-index:-1
z-index:0
z-index:1
z-index栈
position
- position:static|relative|absolute|fixed
相对，绝对，固定
position:relative
- 仍在文档流中
- 参照物为元素本身
- 使用场景，绝对定位元素的参照物
position:absolute
- 默认宽度为内容宽度
- 脱离了文档流
- 参照物为第一个定位祖先／根元素
position:fixed
- 默认宽度为内容宽度
- 脱离文档流
- 参照物为视窗
1.4.6.3 float
浮动
float:left|right
默认宽度为内容宽度
脱离文档流
向制定的方向一直移动
float的元素在同一文档流中
半脱离文档流
对后续的元素，脱离文档流。对后续的内容，在文档流。
元素会重叠，内容不会重叠
clear
clear:both|left|right
- 应用与浮动元素的后续元素
- 应用与块级元素
clear
- 空白元素
- clearfix
1.4.6.4 flex
弹性布局
