BOX盒模型

盒模型为什么那么重要？
一个盒模型的功能强弱与否直接决定了咱们在布局上是否简洁~
盒子分为两大部分：IE6的混杂模式盒子、新增的flex弹性盒子
传统盒子：border + padding + content margin
boxWidth = border + padding + width
IE6混杂模式盒子：计算方式和传统方式不一样 **boxWidth = width contentWidth **= width - padding - border
使用盒模型的时候，是需要触发的；box-sizing :border-box； content-box;默认值；
主要针对于宽度是百分比 || 用户自定、后端传的，input标签天生自带border为2px；
overflow：scroll，滚动条；
auto按需出现滚动条；
hidden隐藏溢出内容；
visible对移除溢出内容不做处理，默认值；
resize：none，默认值；
both，让用户改变宽高；
horizon；vertical；这个属性不能单独使用，必须要加上overflow这个属性联合使用。不常用。

新增的**flex弹性盒子：要在父级上添加 display：flex块级弹性盒子；|| inline-flex内联的弹性盒子；
父级：
flex-direction：column;(把主轴变成垂直方向)；
row(默认值，水平方向，自左向右)；
row-reverse(水平方向，自右向左)
flex-wrap：wrap，换行；
nowrap，不换行；
wrapreverse，倒着换行。
justify-content：基于主轴做对齐方式；
flex-start，主轴左对齐；
flex-end，主轴右对齐；
center，基于主轴居中对齐；
space-between，两端对齐；
space-around，元素与元素之间相等；
align-items：基于垂直轴进行位置分配；
felx-start，在纵向最顶端；
felx-end，在纵向最低端，
center，在纵轴的居中位置。
stretch，默认值，自动撑开；
baseline，根据文字的顶线进行对齐；主要是针对，单行元素来处理对齐方式的。
align-content**：和align-items功能是一样的，但是它是针对于多行的。
基于交叉轴，也就是纵轴。然后一些属性和justify-content是一样的；

子级：box-sizing：border-box；
order：数字；数字越小在后面，默认值为0； 方块1，方块2；
align-self：子项作为一个个体基于交叉轴的分配方式；
flex-star；
flex-end；
center ；
baseline；
stretch；比父级比较级大，干过align-items；不干不过align-content；

弹性盒子，给你怎么弹~
子级：
flex-grow：1；当这一行主轴还有剩余空间的时候，我们这个flex-grow会让当前这个元素按照我们设置的比例来分配剩余的空间，最终来调整自己的大小，形成新的宽度。
flex-shrink：收缩；默认值是1；
例如：方块1，方块2，方块3；设置flex-shrink ： 3在方块三上；
计算方式：200px 1 + 200px 1 + 400px 3 = 1600px;；
200px 1 / 1600px * 200px = 25px；
方块1缩小的值为25px；那么实际值为175px；加权值进行计算的时候，计算的不是盒子的宽度而是内容区的宽度

flex-basis：150px；相当于宽度150px；比宽度权重高。auto，默认值，和宽度一样。

在你设置宽的时候，如果basis设置有值，且小于width，那么真实的宽的范围basis < realwidth < width
在你不设置width的时候，设置basis，元素真实的宽 min-width = basis，
当不换行内容撑开超过内容区时，会撑开容器，无论什么情况，被不换行的英文内容撑开的容器，不会压缩计算。
flex：复合值；grow shrink basis ；作用（居中）
可动态增加的导航栏，等分布局（四等分、二等分、中间可加margin）
其中一个固定宽度的布局（固定一个，固定两个 … ）可在固定的元素内 flex : 0 0 200px
圣杯布局、 流失布局
align-items：默认值stretch；在交叉轴方向如果你没给你元素设置长度，就把你这个元素的长度拉伸到交叉轴的长度一个容器的长度。

作业提示：固定的部分，涉及到了flex上面那俩不动也不缩，那俩值为0
延展的部分自适应，felx-grow为1

总结flex：
父级：方向、是否换行、基于主轴和交叉轴的位置分配一些的属性
子级：应用felx生成的功能属性、