前端-谈谈我对盒模型的了解

首先，我们要区分盒模型和盒子：盒模型有margin部分，而盒子不算margin。

1.W3C标准的盒模型，一个盒子的大小是：width+padding+border，width是内容区，也就是说width不包括padding和border。

2.IE混杂模式盒模型，一盒子的大小是：width-padding-border，即width是包括padding和border。

CSS3中就有一个属性可以规定咱们使用的是W3C标准模式还是IE混杂模式的盒模型：

box-sizing : content-box  使用W3C准备盒模型

                    border-box   使用IE混杂模式盒模型

弹性盒子
            这是我认为css3中最重要的一部分。
            我们在移动端开发的时候，由于手机的大小都各不相同，所以我们的元素不能定宽，要用弹性盒子来按照百分比分配元素的宽度。

            我们给父级的display设置成flex之后，就让父元素变成了一个弹性盒子，里面的子元素都可以使用flex属性了。


            这个时候，所有的元素会自动变成一行，因为加上display：flex之后还会默认加上一个flex-wrap：nowrap，即不换行，
                  这个时候如果子元素的总宽度大于父元素的宽度，就会压缩子元素，让它们可以在父级容器中排成一行。如果改成wrap值，
                  那么超过容器的宽度之后就会换行了。


              flex属性是一个复合属性，它包括flex-grow、flex-shrink、flex-basis


                  flex-grow  按比例分配剩余空间。
                  flex-shrink 设置收缩比例，多出盒子的部分按照比例的大小去掉相应的大小，比例越大，削减的越多，
                              具体的削减数值有一个复杂的计算公式：
                  flex-basis 伸缩基准值。该属性设置元素的宽度，如果同时出现了width和该属性，那么会覆盖掉width属性的值。


            justify-content:center


            align-items:center


            这两个属性同时在父级中设置的时候，会让子元素在父级中水平垂直居中，其中justify-content是设置水平方向，align-item是设置垂直方向。