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

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


#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;
}

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

【本章助记卡片:卡片 for 第五十六章

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

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