一.怪异盒模型

box-sizing:border-box;
box-sizing:content-box;
标准盒模型:
w=width+padding+border
h=height+padding+border

怪异盒模型:
w=width包含了(padding+border)
h=height包含了(padding+border)

二.css3弹性盒子

弹性盒:
1.设置为弹性盒后,父元素为容器,子元素为项目
2.容器中存在两个轴,默认水平方向为主轴,垂直方向为次轴
3.项目默认沿着主轴排列
4.浮动失效,清除浮动,vertical-align都失效

容器属性(给父元素设置,影响子元素)

1.display:flex/inline-flex
        
2.flex-direction:设置主轴方向(row,row-reverse,column,column-reverse)

3.flex-wrap:wrap/nowrap(默认,不换行)/wrap-reverse

4.综合写法:flex-flow:主轴方向 是否换行;

5.主轴对齐方式:justify-content:
                    flex-start
                    flex-end
                    center
                    space-between
                    space-around
                    space-evenly
                    
6.侧轴对齐方式:align-items:
                flex-start
                flex-end
                  center
                baseline
                stretch拉伸,默认值
                
7.换行后的侧轴对齐方式:align-content:
                        stretch 拉伸,默认值
                        flex-start
                        flex-end
                        center
                        space-around
                        space-between
                        space-evenly

项目属性(给子元素设置,影响子元素)

1.align-self:侧轴对齐方式
                flex-start
                flex-end
                center
                stretch 拉伸
                atuo(与父容器的align-items一致)
                
2.order:数字; 反向排序
数字越大,越靠后,反之数字越小,越靠前,可以为负数

3.flex:数字;收放大小
flex-grow:放大
flex-shrink 缩小
flex-basis 大小

三.css3多列

多列布局
column-count:分列;
column-gap:列间距;
column-rule:列表框大小 形态 颜色;
column-fill:填充方式;
            balance尽可能的平均分配
            auto:优先填满上一列
            
column-span:是否跨列;
            none:不跨列
            all:跨列所有列