布局简介、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

弹性布局

flex terms

创建