一、box-sizing
box-sizing:
content-box: 正常，即padding和border都会扩大盒子宽高
border-box: 在当前的盒子模型内，往内部修改
二、calc计算
calc(100px-20px) x错的
calc(100px - 20px) 对的
三、弹性布局
postCss webkit
若父级用了display：flex，则会水平布局
justify-content: 子元素水平排列方式
center: 居中
space-between： 两端对齐
space-around： 子元素拉手分布
flex-start: 居左
flex-end: 居右
align-items: 子元素的垂直排列
center: 居中
flex-start: 居左
flex-end: 居右
align-content: 多行的垂直排列
center: 居中
flex-start: 居左
flex-end: 居右
flex-direction：元素排列方向
row: 横向排列（默认）
row-reverse: 横向翻转
column: 纵向排列
column-reverse: 纵向翻转
flex-wrap：子元素是否在一行显示
nowrap: 不换行
nowrap: 换行
flex-flow: <flex-direction> <flex-wrap>
子级的属性
flex: 1 系数，即将div分成n份
子元素在划分父元素宽度时，会先去掉固定宽度
flex-grow: 1； 定义子元素的放大比例
align-self: flex-start 用于覆盖父级的align-items垂直排列
order：0 规定子元素顺序， 越小越靠前