首先，我们要区分盒模型和盒子：盒模型有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是设置垂直方向。
