box-sizing

box-sizing是CSS3中的一个属性，用于定义盒子的宽度和高度的计算方式。它有两个可选值：content-box和border-box。

- content-box：默认值，表示盒子的宽度和高度只包括内容区域，不包括内边距和边框。
- border-box：表示盒子的宽度和高度包括内容区域、内边距和边框。

使用box-sizing属性可以方便地控制盒子的大小，避免了在添加内边距和边框时需要手动调整盒子大小的麻烦。

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

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  box-sizing: border-box;
}

在上面的例子中，.box类定义了一个宽度为200px、高度为100px的盒子，并设置了20px的内边距和1px的边框。通过设置box-sizing属性为border-box，可以让盒子的宽度和高度包括内边距和边框，从而避免了手动调整盒子大小的麻烦。