CSS布局

布局：将元素以正确的大小摆放在正确的位置上，元素摆放模式

display

设置元素的显示方式
block：默认宽度是父元素，可设置宽高，换行显示
inline：默认宽度是内容宽度，不可设置宽高，同行显示
inline-block：默认宽度是内容宽度，可设置宽高，同行显示，整块换行
none：设置元素不显示，和visibility-hidden区别就是none隐藏之后后元素会占据

position

position 设置定位方式 top bottom right left 可设置边缘距离，默认为static静态定位。relative ：相对定位，仍在文本流中，参照物为元素本身，绝对定位的参照物。
absolute：绝对定位，默认宽度为内容宽度，脱离文档流，参照物为第一个定位祖先/根元素。
fixed：固定定位，默认宽度为内容宽度，脱离文档流，参照物为视窗。可用于固定顶栏和遮罩
z-index：设置元素在z轴上的排序，默认值是0，设置比0大会盖在0上面
z-index栈：元素根据参照物的z-index的大小，不管子元素多大也不会超过参照物相比较。

float

right向右浮动，left向左浮动。默认宽度为内容宽度，脱离文档流（会被边框挡住），向指定方向一直移动。
float元素在同一文档流。
float元素半脱离文档流：对元素脱离文档流，对内容在文档流。

clear

清除浮动，应用于后续元素，应用于块级元素。
加空白元素，clearfix。一般使用clearfix：after{context‘.’；clear：both；height：0；overflow：hidden；visibility：hidden；}

flex

弹性浮动
方向：
flex-direction

flex-wrap 弹性换行
wrap：正向弹性换行 wrap-reverse：反向弹性换行

flex-flow 能一次设置以上两个属性

弹性：
flex-basics 设置flex item的初始宽高
flex-grow 分配元素剩余空间的比例 初始值0
flex-shrink 初始值1

对齐：
justify-content

align-items 设置辅轴方向对齐方式

align-self 设置每个元素在辅轴方向对齐方式

align-content 设置多行在辅轴方向对齐方式