CSS中box-sizing的content-box与border-box为何差异如此显著？

只修改CSS中的box-sizing属性，就能看到两个div的尺寸表现差异巨大，以下是可运行的代码示例：

CSS 代码 #

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  padding: 50px;
  box-sizing: content-box;
}

.div2 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  padding: 50px;
  box-sizing: border-box;
}

HTML 代码 #

<h1>CSS box-sizing content-box vs border-box</h1>
<div class="div1">box-sizing: content-box</div>
<br>
<div class="div2">box-sizing: border-box</div>

核心差异解析 #

• content-box（默认值）：元素的最终尺寸是「设置的宽/高」加上内边距（padding）和边框（border）的尺寸。示例里的.div1实际总宽度为 300px + 50px×2 + 1px×2 = 402px，总高度为 100px + 50px×2 + 1px×2 = 202px。
• border-box：元素的最终尺寸就是你设置的宽/高数值，内边距和边框都会被包含在这个尺寸范围内，内部内容区域会自动缩小来适配。示例里的.div2总宽高固定为300px×100px，padding和border会占用内部空间。

内容的提问来源于stack exchange，提问作者Robert Stevens