en/guide/css-box-sizing

CSS 盒模型（Box Sizing）是 CSS 中一个非常重要的概念。它定义了元素内容的宽度、高度以及内边距（padding）、边框（border）和外部边距（margin）是如何计算的。理解盒模型有助于更好地控制网页布局。

CSS 中有两种盒模型类型：

标准盒模型（content-box）：这是默认的盒模型。元素内容的宽度、高度仅由 width 和 height 属性控制，不包括内边距、边框和外部边距。
替代盒模型（border-box）：在这种情况下，元素的宽度、高度包括了内边距、边框和外部边距。这意味着，如果设置一个元素的宽度为 200px，那么它的实际显示宽度也将是 200px，包括内边距和边框。

可以通过 box-sizing 属性来设置盒模型类型：

element {
  box-sizing: content-box; /* 默认值 */
}

或者：

element {
  box-sizing: border-box;
}

假设我们有一个 HTML 元素，它的样式如下：

div {
  width: 200px;
  padding: 20px;
  border: 10px solid black;
  box-sizing: border-box;
}

在这个例子中，如果我们将 box-sizing 设置为 border-box，那么 div 元素的实际显示宽度将是 200px，包括内边距和边框。