弹性盒
1、盒模型（box-sizing）： 标准盒模型（content-box）——
a、padding和border 计算方式：自身content+padding+border
实际content+padding+border+margin
怪异盒模型（border-box）——
b、padding和border在盒子内部 计算方式：自身content（padding和border）
实际大小：content+margin
2、弹性盒：概念display：flex——默认的主轴是X轴（主轴和侧轴是对应关系）
弹性盒环境下所有的标签都可以直接设置宽高大小
居中方式：margin：auto
切记：浮动不可用定位和盒模型可以正常使用
加在父级元素上的属性——改变主轴的默认方向flex-direction：row\column
主轴上的对齐方式justify-content：flex-start/flex-end/center/space-between/space-around/space-evenly
侧轴对齐方式align-items：flex-start/flex-end/center
换行属性flex-wrap：wrap
行与行之间有间距align-content：flex-start/flex-end/center/space-between/space-around/space-evenly
加在子级元素上的属性：侧轴上的对齐方式控制单个元素align-self
排序优先级order：数字——越大优先级越高 越往后显示
flex：1 占据主轴上剩下的空间 并且会随着内容进行撑开
