移动端适配
IE（怪异）合模型：设置宽高后，占地面积就不会发生改变，增加padding后会压缩内容区域的大小，开启怪异合模型：box-sizing：border-box；
标准合模型：宽高只是设置内容区域的大小，设置padding后总的占地面积会发生改变。
弹性盒子
弹性盒子是css3中新的布局模式，又叫收缩合模型，开启弹性盒子display：flex；
容器默认存在两根轴：水平轴main axis(方向位置都会变不能倾斜)，垂直轴cross axis
主轴开始位置main start 结束位置 main end；
交叉轴开始位置cross start 结束位置 cross end;
主轴上的位置变化
justufy-content:
- flex-start；开始位置 默认
- flex-end；结束位置
- center；中心位置
- space-around；两端对齐 元素之间的距离=2*元素到边框的距离
- space-between；元素贴着两边，元素之间距离相等
主轴的方向
flex-direction: - row 从左到右
- row-reverse从右到左
- column 从上到下
- column-reverse 从下到上
交叉轴上的对齐方式
align-items:
- flex-start;交叉轴的起点对齐
- flex-end;交叉轴的终点对齐
- center；交叉轴上中点对齐
- baseline；根据第一行文字的基线对齐
开启换行弹性合模型下默认不换行
flew-wrap:
- nowrap;默认不换行
- center；换行
- wrap-reverse;倒序换行
align-content 的功能和align-item 类似相同点都是设置自身子元素在自身上的对齐方式
不同点：改属性必须是多行的时候，对单行无效，同时可以去掉多余的行间距。
box-shadow：盒子阴影；
属性：
- 水平位置的偏移
- 垂直位置的偏移
- 模糊度
- 阴影面积
- 阴影颜色
- 内外阴影outset 外 inset内
元素的排序需要将当前层级的每个元素都排序，否则: 排序的元素和 未排的元素按照两套顺序排列
.box:nth-child(1){
order: 3;
}
.box:nth-child(2){
order: 2;
}
.box:nth-child(3){
order: 1;
}
元素的缩放
flex-shrink元素的缩放：默认比例；假如一个大div300px内有5个div宽98px
超出部分/元素的总个数 = 每个元素要收缩的面积
.main>div:nth-child(1){
flex-shrink:2;
}
.main>div:nth-child(2){
flex-shrink:1;
}
.main>div:nth-child(3){
flex-shrink:1;
}
.main>div:nth-child(4){
flex-shrink:0.5;
}
.main>div:nth-child(5){
flex-shrink:0.5;
}
元素的放大：flex-grow 父级500px 三个子元素一个100px
未占面积/元素个数（分配分数）= 每个元素放大的面积
.mis>div:nth-child(1){
flex-grow:2;
}
.mis>div:nth-child(2){
flex-grow:2;
}
.mis>div:nth-child(3){
flex-grow:1;
}