【--布局--】

布局

表格布局

display:table-cell;（变成单元格）
标签太多，加载缓慢。

浮动布局

浮动带来的问题;
对自身的影响：脱离文档流，使元素独立起来并且可以设置宽高。
对兄弟元素的影响：改变了兄弟元素的布局。
对父级的影响：对父容器造成坍塌。

定位布局

固定布局：使用标准px单位。（推荐使用）
流式布局：使用百分比 %。

多列布局

clumn-width：200px; 设置列宽
clumn-count： 设置几列宽

弹性盒模型

display:flex; 弹性盒模型，默认主轴方向是x轴，起始线是左边开始。

属性：

flex-direction 改变主轴方向，row x抽为主轴，colum y轴为主轴 。
row-reverse x轴为主轴，起始线从右开始。
column-reversey轴为主轴,起始线从下开始。
flex-wrap; wrap;换行；（默认是nowrap不换行）子元素在父元素中换行。

综合属性：

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

重要属性：

justify-content 设置子元素在父容器中主轴的排列位置的。
flex-start : 弹性盒子元素将向行起始位置对齐flex-end: 弹性盒子元素将向行结束位置对齐center: 弹性盒子元素将向行中间位置对齐

常用的几种：

justify-content：；
space-between:弹性盒子元素会平均地分布在行里（两端对齐，有空余会分配给每个子元素中间）
space-around:弹性盒子元素会平均地分布在行里，两端保留（将剩余空间分成元素的2倍，分别在元素的左右分配）
space-evenly: 平均分配剩余空间

其他

1.align-items(适用于父类容器上) 设置或检索弹性盒子元素在侧轴方向上的对齐方式
属性：
（和重要属性里面的属性一样）
align-items: center;设置侧拍上居中
2.align-self: flex-end（设置起始线位置）;设置元素在侧轴的位置