css布局

表格布局

display：table-cell；

会使浏览器渲染较慢 不推荐使用

浮动布局

浮动的影响：

对自身的影响：脱离文档流 使元素独立起来 并且可以设置宽高

对兄弟元素影响：改变了兄弟元素布局

对父级影响：父容器坍塌

这些是浮动带来的坏处，所以要清浮动

定位

固定布局：使用标准px单位

流式布局：使用百分比 %

多列布局

column-width：自适应列宽

弹性布局

display：flex；弹性盒模型，默认主轴方向是x轴，其实先是左边开始，终止线是右边结束

flex-direction：；改变主轴方向 row x轴为主轴 column y轴为主轴 row-reverse 主轴方向为x轴，起始线从右到左开始 column-reverse y轴为主轴，起始线从下到上

flex-wrap：wrap；（换行属性） 默认不换行（nowrap）子元素在父元素中换行

flex-flow：column-revere nowarp；以上两种的综合属性

justify-content：设置子元素在父容器中主轴的排列位置的 space-between；两端对齐，有空余会分配给每个子元素中间 space-around 将剩余空间分成元素的2倍，分别在元素的左右分配 space-evenly 平均分配剩余空间

align-items：center；（作用在父元素上） 设置侧轴上居中 flex-end 设置元素在侧轴的位置