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