box-sizing的宽度包含了哪些？

box-sizing 属性控制着浏览器如何计算一个元素的总宽度和高度。它有两个值：

• content-box (默认值): 宽度和高度只应用于元素的内容本身。这意味着任何 padding, border 和 margin 都将被 添加 到已定义的宽度和高度之外，导致元素的实际尺寸大于指定的 width 和 height 值。

• border-box: 宽度和高度应用于元素的 内容、内边距（padding）和边框（border）。这意味着指定的 width 和 height 值代表了元素的最终尺寸，包括 padding 和 border。 Margin 仍然在元素的总尺寸之外。

用一个例子来说明：

假设你有一个 div 元素，样式如下：

div {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

• content-box: 该 div 的总宽度将是 100px (width) + 20px (padding-left + padding-right) + 10px (border-left + border-right) = 130px。总高度将是 50px (height) + 20px (padding-top + padding-bottom) + 10px (border-top + border-bottom) = 80px。 外边距（margin）不包含在 box-sizing 计算中，但会影响元素占据的空间。

• border-box: 该 div 的总宽度将是 100px，包含了内容、内边距和边框。总高度将是 50px，同样包含了内容、内边距和边框。 外边距（margin）仍然不包含在计算中。

因此，box-sizing: border-box 通常更容易进行布局，因为它简化了尺寸计算，使元素的最终尺寸更可预测。 你不需要为了适应 padding 和 border 而不断地从 width 和 height 中减去它们的值。