一、怪异盒模型（IE盒模型）：在IE低版本浏览器如果丢失了文档类型，触发IE盒模型（基本在IE6里才有）

1.属性：box-sizing

2.属性值：

    -content-box   标准盒模型（默认值 ）

    -border-box 怪异盒模型

3.特点：

    -当盒子形成怪异盒模型之后，当前padding值不会撑大容器大小，不需要减去相应的padding值

    -border是向内生成的

4.计算方式：

    -计算自身大小：   content（包含padding+border）

    -盒子在浏览器中所占的位置大小：  content（padding+border）+margin

5.区别：

    -不需要计算border和padding的值

    -工作项目中如果使用怪异盒模型，不考虑兼容问题

    -由于兼容问题，通常在移动端使用，不建议在PC端使用

一、弹性盒模型：

1.基础概念：控制子级元素在父级容器中的排列位置

2.属性：display

    -设置在父级元素上的属性——控制所有子级元素

    -设置在字级元素上的属性——控制单个子级元素

3.属性值：flex

    -盒模型是控制子级元素在父级元素中的排列顺序/位置  display：flex一定要加在父级容器上

    -当前元素形成盒模型后，默认的主轴方向是X轴，侧轴是Y轴（主轴和侧轴不是固定的，可以通过属性设置）

    -在元素中设置了弹性盒，不考虑元素类型，所有的子级元素可以设置宽高大小

4.居中方式（单个元素居中）：

    -设置了弹性盒后使用margin:auto

注意：在弹性盒环境中，浮动不可以使用；定位、盒模型都可以正常使用

5.  改变默认主轴的方向：flex-direction：row（x轴，默认值）/column（Y轴）

6.对其方向：

    -主轴方向上的对齐

    justify-content：

        -flex-start：表示元素在起始位置（默认值）

        -flex-end

        -center：居中

        -space-between：两端对齐，其余空间自动分配（导航推荐使用此属性值）

        -space-around 所有空间都是自动分配的（元素和元素之间间距等于间距相加）

        -space-evenly：相对于上一个属性值，所有的间距都是相同的（扩展）

    -侧轴的对其方向：

        -属性：align-items:

        -属性值：

            -flex-start

            -flex-end

            -center

            -baseline： 基线对齐

                -当前所有的子级元素都是文本的时候（排列方式）以基线对齐

            -stretch 拉伸

    7.换行属性：flex-wrap

        -nowrap 不换行

         -wrap 换行

    8.行与行之间对齐方式

       -属性：align-content

       -属性值：

           -flex-start没有行间距

           -flex-end底对齐没有行间距

           -center居中没有行间距

           -space-between两端对齐，中间自动分配

           -space-around自动分配距离

    ——以上为可设置在父级上的属性——

    ——以下为设置在子级上的属性——

   1.控制子级元素在侧轴上对齐方式

        -属性：align-self：

        -属性值：

            - auto：父级元素有侧轴的对齐方式，就继承；否则默认为拉伸（前提是父级不能设置高度）

           -flex-start

           -flex-end

           -center

           -stretch 拉伸

    2.占据主轴上的剩余空间

        -属性：flex

        -属性值：number

            -常用的是1（跟随用户手机屏幕大小自适应）