box-sizing属性的宽度包含了哪些内容？

box-sizing 属性用来控制元素的盒模型如何计算宽度和高度。

box-sizing 可以设置为两个值：

• content-box：默认值，宽度和高度不包含内边距和边框。
• border-box：宽度和高度包含内边距和边框。

例如：

/* 默认的 box-sizing 值为 content-box */
div {
  width: 50%;
  padding: 10px;
  border: 1px solid black;
}

上面的 CSS 规则中，width 的计算公式为 50%，但是元素的实际宽度为 50% + 2*10px + 2*1px = 50% + 22px，因为 padding 和 border 会增加元素的宽度。如果将 box-sizing 设置为 border-box，那么 width 的计算结果就是包含了 padding 和 border 的。