必须要掌握的盒模型重要属性——box-sizing

以前在学习html的时候，总是看见其他网站在根元素上加一个box-sizing: border-box，一直没有搞明白这个属性具体是干什么的，这两天在学习的时候遇到了关于内边距和边框的尺寸，以及一个元素的宽高的问题才明白这个属性到底是什么意思，以及怎么用的。

一般情况下，CSS盒模型的默认定义中，一个元素的宽(width)和高(height)只会在当前的元素内容区里起作用，但是，如果给这个元素加上一些样式，比如：内边距(padding)和边框(border)，那这个元素在显示时会加上内边距和边框的值的总和才是当前元素的总宽高，这个可以用一个Demo测试一下，很明显就可以看出来了。

现在给出如下的盒模型，以及样式：

• html结构：

<div class="box content-box"></div>

• css样式：

html {
  font-size: 10px;
}
div.box {
  width: 20em;
  height: 12em;
  padding: 2em;
  border: 5px solid red;
  background-color: violet;
}

• 效果图：

从上面给出的css样式中我们不难看出，给出的盒模型宽高分别为20em和12em，换算成像素，也就是一个200x120px的盒模型。但是从查看浏览器的查看元素里我们却发现，这个盒模型，并不是200x120px的，而是变成了250x170px，很明显这是加上了padding和border的尺寸：

• padding值总和：2em x 2 x 10 = 40px；
• border值总和：5px x 2 = 10px；

从上面换算后的尺寸可以得到padding和border的总和为：50px，加上content-box的元素内容区宽度200px，总宽就是250px，总高度就是170px。

这个结论意味着，我们在使用进行页面布局的时候，时刻需要注意内边距和边框的值，尤其是在响应式布局的场景下甚为烦人，W3C给我们了一个属性——box-sizing，使用这个属性可以很好的解决这个总宽高的问题。

box-sizing有两个属性值：

1. content-box，这个也是默认值，意思是当前元素的宽高值只会加到当前的内容区，并不会包含内边距(padding)和边框(border)的值。这也就是很好的解释了上述案例中为什么整个盒子的宽高变成了250x170px了。
   计算公式：
   宽度（width） = 内容区宽度
   高度（height） = 内容区高度

2. border-box，当前盒子的宽高包含了内边距(padding)和边框(border)的值。
   计算公式：
   宽度（width） = 内容区宽度 + 内边距 + 边框
   高度（height） = 内容区高度 + 内边距 + 边框

下面是我在学习这两个属性时测试的案例：

• html结构：

<div class="box content-box"></div>
<div class="box border-box"></div>

• css样式：

<style>
  html {
    font-size: 10px;
  }
  div.box {
    width: 20em;
    height: 12em;
    padding: 2em;
    border: 5px solid red;
    background-color: violet;
  }
  .content-box {
    box-sizing: content-box;
    margin-bottom: 5em;
  }
  .border-box {
    box-sizing: border-box;
  }
</style>

• 效果图：

从上述案例很明显可以看出来content-box和border-box的区别：

• 当属性值为content-box时，总宽高为：
  width = 200px + 20 x 2 + 5 x 2 = 250px；
  height = 120px + 20x2 + 5x2 = 170px。
• 当属性值为border-box时，总宽高为：
  width：150px + 20x2 + 5x2 = 200px
  height: 70px + 20x2 + 5x2 = 120px

这里有个值得注意的坑，那就是margin-bottom，并不影响盒模型的总宽高，无论box-sizing是哪个值，这个结论可以在MDN上查到的。

以上就是我在学习盒模型的属性box-sizing时的心得总结，希望能对大家有用，由于本人才疏学浅，如果文中有不正确的地方，恳请请各位大佬批评指正，谢谢大家！