由图可以看出,中间400x400的部分是content,然后向外,依次是padding,border,margin。这些部分合起来,构成了我们的盒子模型。假如这是一个div,我们把这个div想象成一个木质的礼品盒,那么border就是这个木盒子的边框,就是组成盒子的模板,border的宽的就是木板的厚度。Content就是我们用来存放礼品的空间大小。而padding则是我们的礼品到木盒内边的距离。Margin是木盒与它周围其他物品之间的距离,如图的margin是50px,也就意味着在木盒四周50px的范围内不能有其他东西。我们常利用盒子模型的这几个属性来调整元素自身的大小及其位置,与周边元素的距离。
跟句上面两张图,我们可以发现,一般情况下我们给元素设的width值与height值,默认为元素的content部分的大小,而padding、border、margin的值依次向外排列撑开。这样,该元素最终所占据的空间宽为400+100x2+20x2+50x2=740px,高为300+100x2+20x2+50x2=640px,而元素自身实际大小为宽400+100x2+20x2=640px,高00+100x2+20x2=54px。在实际开发中,这种布局方式比较适用于元素大小随包裹内容变化而变化的情况。
我们很容易就可以发现,加上box-sizing: border-box;这个属性后,我们在代码中设的width值与height值变为了元素自身实际大小,也就是元素的content、padding、border三者加起来的大小。Margin所处的位置依然不变,这种情况下,由于border与padding是由外向内挤的,使得content部分的空间被压缩,最终只剩下了160x60的大小。此时,该元素所占据的总空间为宽400+50x2=500px,高300+50x2=400px,元素自身实际大小为400x300px。这种布局方式适用于元素能占用的空间大小固定,内容往里压缩的情况。