怪异盒模型(IE盒模型)
设置:box-sizing:border-box;
特点:width(height) = width(height) + padding + border
弹性盒模型
设置:display:flex;
特点:用于响应式布局
flex-direction:row/row-reverse/column/column-reverse; //元素排列方向
flex-wrap:wrap/wrap-reverse; //换行设置 默认不换行只收缩宽度
flex-flow:derection wrap; //上面两个合并写法
justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly; //主轴对齐方式
align-items:flex-end/center/stretch; //交叉轴对齐方式,适用于单行
align-content: 和主轴一样; //交叉轴对齐方式,适用于多行
align-self:和align-items一样; //设置单个子元素的交叉轴对齐方式
flex-grow:1(平均分配)/0(不分配)/n(n等分); //剩余空间分配
flex-shrink: 0(不缩小); //缩小比例