怪异盒模型：(IE盒模型:丢失文档类型的时候,在IE低版本浏览器中会以怪异盒模型方式解析)
box-sizing：content-box（标准盒模型）/border-box（怪异盒模型）
特点：1）padding不会撑大容器大小；2）border向内长（button也是）
--不推荐PC端使用，建议在移动端使用；
弹性盒: display：flex；（控制子级元素在父级元素上的排列方式）
-- 弹性盒属性要给父级添加,使父级形成弹性盒环境 控制子级元素；
-- 弹性盒中默认主轴方向是X轴(水平方向) 默认的侧轴是Y轴；
--弹性盒环境下所有的元素都可以直接设置宽高大小；
--居中方式:针对于单个元素设置(margin:auto)；
注意：浮动在弹性盒的环境下是没有作用；定位、盒模型可以使用；
添加在父级元素上的属性：
控制弹性盒主轴方向： flex-direction：row（默认x轴）/column（主轴为Y轴，测轴为X轴）
主轴的对齐方式：justify-content：flex-start /flex-end /center /space-between（两端对齐，其他空间自动分配）/space-around（元素间间距自动分配）/space-evenly（元素间间距完全相等）
侧轴对齐方式：align-items：flex-start/ flex-end/ center/ baseline
换行：flex-wrap：nowrap/wrap （弹性盒中默认所有的子级元素都会在一行内显示 进行挤压）
行间距：align-content：flex-start /flex-end /center /space-between（两端对齐，其他空间自动分配）/space-around（元素间间距自动分配）/space-evenly（元素间间距完全相等）
添加在子集元素上的属性：
align-items:表示侧轴上的对齐方式 控制所有的子级元素
align-self:表示侧轴上的对齐方式 控制单个子级元素
flex作为属性：
flex：数字 （表示所占份额）
flex:1 占主轴上的剩下的空间并且会撑大当前盒子的大小 重点！！！
居中方式的总结：
- 表格居中 align、valign
- 文本居中 text-align、line-height
- 版心居中 margin:0 auto
- 基线对齐 加标签 转类型 基线对齐 vertical-align
- 背景居中 background-position
- 定位居中 已知(1. left50%、top50% + margin：-本身宽高的一半; 2.计算属性)和未知居中（上下左右都为0）
- 位移居中
- 弹性盒的主轴/侧轴居中