如何理解CSS的盒子模型( 二 ) _我们通过一个案例来讲解盒子

文章插图

07 上面的公式清晰的表示了盒子大小的计算方法，此时我们只给大盒子设置上和左的padding ，同时大盒子的内容宽和高只减去上和左padding的大小，可以达到同样的效果。

文章插图

08 我们在设置padding时将右侧和底部的值设置为0 ，同时宽度在原来400px的基础上减去100px ，高度在原来300px的基础上减去80px ，在浏览器中查看的效果如下图所示，和步骤6的结果是一致的。

文章插图

09 接着我们为大小盒子添加边框（border），根据步骤6的公式我们可以看出border的宽度也会算在盒子的大小中，因此我们如果需要加上边框的话，还需要调整其他值的大小。我们先来看小盒子，给小盒子的边框设置为5px ，那个在不改变小盒子大小的前提下，我们需要将小盒子的宽度减去10px变为190px ，高度减去10px ，变为130px 。大盒子的设置我们紧接着步骤6的值来修改，在步骤6中我们可以看到大盒子的内容和小盒子的大小宽高是一致的，此时如果给大盒子添加10px的边框，不能再改变大盒子内容的宽高了，因此我们想到可以减少padding的值，因此分别将padding的值减少10px即可。

文章插图

10 将大小盒子的设置改为上图的设置即可，此时我们打开浏览器会看到盒子的效果同步骤6 。此时我们发现还有一个margin的设置没有用上， margin是用于设置盒子之间的距离，不影响盒子模型的计算。很多标签默认带有margin和padding,所以将来在进行页面布局的时候一定要清除这些标签默认的margin和padding 。