怪异盒模型、弹性盒模型、多列布局

1.怪异盒模型： 
 box-sizing:
         属性值：
              box-sizing:content-box;  常规盒模型
              box-sizing:border-box:   怪异盒模型（IE盒模型）

     怪异盒模型：
         触发怪异盒模型：
              box-sizing:border-box;
       
  怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。

2.弹性盒模型：
 弹性盒子：布局方案。
        作用：控制离它最近的一层子元素,布局方式。
        特点：
            a：弹性盒子里面的离它最近的一层子元素都可以添加大小。
            b: 如果想让弹性盒子里面的一个子元素左右上下居中，只需要给子元素添加margin:auto即可
            c: 弹性盒子里面的子元素都是沿着“主轴”排列
                "主轴":有可能是X轴也有可能是Y轴，如果X轴为主轴，Y轴就是侧轴。

    一：触发弹性盒子：
         display:flex;

    二：改变主轴的方向：
         flex-direction:
              属性值：
                  row     (默认值：X轴为主轴)
                  column  (Y轴为主轴)
                  column-reverse    (以Y轴为主轴反向排列)
                  row-reverse    (以X轴为主轴反向排列)

    三：改变主轴的对齐方式：
         justify-content:
              属性值：
                  flex-start   默认状态：在弹性盒子开始的地方显示
                  flex-end     在弹性盒子末端对齐
                  center        居中对齐
                  space-between    两端对齐
                  space-around     自动分配间距

    四：侧轴的对齐方式:
         align-items:
              flex-start    侧轴开始的位置
              flex-end      侧轴结束的位置
              center        侧轴居中的位置
              baseline      基线（flex-start等效）
              stretch（默认值）   拉伸

    五：控制弹性盒子里面的子元素（灵活元素）换行处理：
         flex-wrap:
              wrap         换行
              nowrap       不换行
              wrap-reverse   反向换行

    六：控制行与行的对齐方式：
         align-content:
                 flex-start   默认状态：行与行之间不存在默认的行间距
                 flex-end     在弹性盒子末端对齐
                 center        居中对齐
                 space-between    两端对齐
                 space-around     自动分配间距

    七：补充：flex-direction 和 flex-wrap简写：
         flex-flow:;
   

 注：以上7个属性全部添加在父元素弹性盒子上面！！！！！！！！！！！！！

    添加在子元素上面的属性：

    一：控制弹性盒子里面 某个 灵活元素 在侧轴的对齐方式。
         align-self:
              auto  默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
              Stretch  元素被拉伸以适应容器。
              Center  元素位于容器的中心。
              flex-start  元素位于容器的开头。
              flex-end  元素位于容器的结尾。

    二：控制子元素的排列顺序：
         order: 数值越大越往后排列。支持负数。

    三：剩余空间的分配：
         flex:1;  分配主轴剩余空间。
 
    flex:1;  简写形式。

            flex-grow:;      扩展的量
            flex-shrink:;    收缩的量
            flex-basis:;     元素的大小

    记住：flex-shrink:0;  不压缩。

 

多列属性：

        1：列数：
            column-count:;

        2:列间距：
            column-gap:;

        3:列分割线：
            column-rule:

        4:控制每一列的列的高度是否统一：
            column-fill:;
                auto     列高度自适应内容
                balance  有列的高度以其中最高的一列统一

        5:跨列：
            column-span:all;

        6:列宽
            column-width: 

        7:columns: 7
            column-count 和 column-width  简写