如何理解box-sizing

box-sizing属性用于定义一个元素的盒模型，即元素的内容区域、内边距和边框的计算方式。它有三个取值：content-box、border-box和inherit。

- content-box：默认值，元素的宽度和高度只包括内容的宽度和高度，不包括边框（border）、内边距（padding）和外边距（margin）。
- border-box：元素的宽度和高度包括内容、内边距和边框的宽度和高度，但不包括外边距。
- inherit：继承父元素的box-sizing属性值。

例如，如果一个元素的宽度为100px，内边距为10px，边框为2px，那么：

- 如果box-sizing为content-box，那么元素的总宽度为100px + 2 * 10px + 2 * 2px = 124px。
- 如果box-sizing为border-box，那么元素的总宽度为100px。

下面是一个示例代码，展示了如何使用box-sizing属性：

/* 将所有元素的盒模型设置为border-box */
* {
  box-sizing: border-box;
}

/* 设置一个带有内边距和边框的div元素 */
div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 2px solid black;
}