弹性盒

（1）怪异盒模型：

  box-sizing:属性值：border-box; ---触发怪异盒模型特点：border和padding直接添加在盒子宽高的内部。 缺点：存在兼容性，移动端可以使用，pc端尽量少用。

（2）弹性盒：

作用：控制盒子子元素的布局方法
特点：
1：弹性盒子默认的主轴是x轴
2：弹性盒的子元素为灵活元素，可以直接添加宽高
3：如果一个子元素在弹性盒子里面上下左右居中，只需要给子元素添加margin:auto;

触发弹性盒：
display:flex; (inline-flex)

在父元素上添加的属性：01 justify-content:控制父元素中主轴的子元素的排列方式;主轴默认为x轴。属性值有：flex-start---初始位置。 flex-end---结束位置。center---居中。 space-between---两端靠边，中间平均分配。space-around---平均分配。space-evenly---自动对齐，多余的空间会分配待元素的两侧，但是不会叠加！02 align-items:控制父元素中侧轴的子元素的排列方式。03 flex-direction: column;控制主轴的方向属性值：默认主轴为x轴，column---这是修改主轴为y轴。04 flex-wrap: wrap; 控制父元素中子元素是否换行属性值：默认不换行，wrap（换行）。05 align-content: center;   控制侧轴多行情况下的对齐方式,就是侧轴中一行与一行的对齐方式属性值：center,space-between等等在子元素上添加的属性：01 flex：数值。---就是子元素在父元素中占据几等分假如为flex:1;就是子元素平分父元素的。flex属性里面是复合写法：flex-grow---就是把父元素剩余空间的平分（按照比例分）假如ul设置弹性盒宽500px，li的宽度为100px,然后也就是剩余空间为200px，假如第一个liflex-grow:1,假如第二个liflex-grow:2；那么200px/3 = 66.7（一份） 也就是第一个li 100px+66.7px； 第二个li 100px+133.3pxflex-shrink---就是设置父元素中子元素在主轴上是否压缩（1为压缩，0为不压缩）flex-basis---相当于给元素设置了宽度，但时当设置了flez-basis之后，width的值不起效果了！02 align-self: flex子项单独在侧轴（纵轴）方向上的对齐方式flex-start;---开始的位置。center;---中心的位置。flex-end;---底下的位置。03： order  ---number排序优先级，数字越大越往后排，默认为0，支持负数。注意点：flex-shrink:0; 弹性盒子子元素在主轴不会挤压（与父元素添加overflow: auto;搭配，实现子元素在父元素主轴上显示，而且不压缩）

多列

多列属性：

  1、column-count ---控制列数（number值）2：column-gap ---控制列与列之间的间距3: column-rule --- 设置或检索对象的列与列之间的边框column-rule-width规定列之间规则的宽度column-rule-color规定列之间规则的颜色。column-rule-style规定列之间规则的样式。4：column-fill --- 设置或检索对象所有列的高度是否统一（就是充满容器）auto：列高度自适应内容balance：所有列的高度以其中最高的一列统一(默认值)5：column-span --- 设置或检索对象元素是否横跨所有列。设置在需要跨列的自身，比如h1，none---不垮列。  all --- 代表的是横跨所有列6：column-width --- 设置或检索对象每列的宽度**注：Internet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。**