前端 day22

一 怪异盒模型

   1 border-sizing：；

      属性值：content-box；常规盒模型

                    border-box； 怪异盒模型

   2 触发怪异盒模型

         border-sizing：border-box；

   3 怪异盒模型特点

         padding和border都会在元素内部，不会把元素撑大。

二 弹性盒模型

   1 弹性盒：布局方案

      作用：控制离它最近的一层子元素的布局方式。

   2 特点

      a 弹性盒子里面的，离它最近的一层子元素，都可以添加大小

      b 如果想让弹性盒里面的离它最近的一个子元素之左右上下居中，只需要给子元素添加margin：auto；

      c 弹性盒的里面离它最近的一层子元素都是按照“主轴”排列；

        “主轴”可以是X轴，也可以是Y轴。如果X轴是主轴，Y轴就为侧轴。

        注：默认情况下X轴为主轴。

   3 触发弹性盒

      display：flex；

  4 改变主轴方向

      fex-direction：；

      属性值：

                  row            默认值：X轴为主轴

                  column         Y轴为主轴

                  column-reverse  以Y轴为主轴，反向排列

                  row-reverse     以X轴为主轴，反向排列

   5 改变主轴的对齐方式

      justify-content：；

         属性值：

                    flex-start       默认状态：在弹性盒子开始的地方显示

                    flex-end        在弹性盒子末端对齐

                    center          居中对齐

                    space-between  两端对齐

                    space-around   自动分配间距

   6 改变侧轴的对齐方式

      align-items：；

        属性值：

                    flex-start       侧轴开始的位置

                    flex-end        侧轴结束的位置

                    center          侧轴居中的位置

                    baseline         基线（和flex-start等效）

                    stretch          拉伸

   7 控制弹性盒里面的子元素（灵活元素）换行处理

      flex-wrap：；

           属性值：wrap          换行

                          nowrap       不换行

                          wrap-reverse  反向换行

   8 控制行与行的对齐方式

      align-content：；

         属性值：

                     flex-start       默认状态：行与行之间不存在默认的行间距

                     flex-end        在弹性盒子末端对齐

                     center          居中对齐

                     space-between  两端对齐

                     space-around   自动分配间距

   9 补充

      a： flex-direction和flex-wrap可以简写为：

            flex-flow：；

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

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

   1 控制弹性盒里面的某个灵活元素 在侧轴的对齐方式

     align-self：；

         属性值：

                auto    默认值，元素继承父元素的align-items属性,如果没有父容器则为stretch               

                flex-start  元素位于容器开头

               flex-end   元素位于容器结尾

               center    元素位于容器中心

               stretch   元素被拉伸以适应容器

   2 控制子元素的排列顺序

      order：数值越大越往后排列，支持负数。

   3 剩余空间的分配

     1 flex：1； 分配主轴的剩余空间。

     2 flex：1；是简写形式。

        flex-grow：；  扩展的两

        flex-shrink：； 收缩的量

        flex-basis：；  元素的大小

       注：flex-shrink：0；不压缩

四 多列布局

    1列数

      column-count：5；

    2 列间距

      column-gap：30px；

    3 列的分隔线

      column-rule：10px solid #ccc；

    4 列高

      column-fill：；

         属性值：

                      auto      列高度自适应内容

                      balance   有高度的列以其中最高的一列统一

5跨列

     column-span：；

         属性值：

               none   不横跨

               all      横跨所有的列

   6 列宽

     column-width：200px；

   7 columns（列数和列宽的复合属性）

     <”column-width”>||<”column-count”>