第五十六章 盒子的尺寸

你也许会问，这有什么可说的，宽高就已经很好的描述了盒元素的尺寸了。那你说，这个宽高包不包含边框的尺寸？

这种问题不需要回答，试一下就知道了，记得把值设置的适当大一点，一眼就能看出结果来的。

#box-sizing{width: 10px;height: 10px;border: 30px solid black;}

结果很明显，这个宽高并不包含边框。^[1]

但有的时候，这让我们的计算变得很麻烦，我们的元素究竟占用多大面积，这不好算，不光要考虑宽高，还要计算上边框的薄厚。^[2]

所以我们就有了一个属性 box-sizing 来说明我们的宽高到底算不算边框。它有两个值：

• content-box： 默认值，宽高只是规定内容区域的大小，不包含边框；
• border-box： 宽高包含边框的尺寸

动手试试效果：

#box-sizing{width: 30px;height: 30px;border: 10px solid black;}

对比下边：

#box-sizing{width: 30px;height: 30px;border: 10px solid black;box-sizing: border-box;}

用到的时候不多，但是不知道的话，遇到某些情况会感到十分困扰。

>注释 1: 就不要检查元素了，喵唧，我这里框架对 CSS 进行了重置，为了表现效果，我只好自己增加属性和它对抗……

>注释 2: 还有内补，下一章学习。