解释你对盒子模型的理解，以及你将如何在 CSS 中告诉浏览器以不同的盒子模型渲染你的布局。

CSS 盒子模型描述了为文档树中的元素生成的矩形框，并根据视觉格式化模型进行布局。每个框都有一个内容区域（例如文本、图像等）和可选的周围 padding、border 和 margin 区域。

CSS 盒子模型负责计算：

• 块级元素占据多少空间。
• 边框和/或边距是否重叠或折叠。
• 盒子的尺寸。

盒子模型规则

• 块级元素的尺寸由 width、height、padding 和 border 计算。
• 如果未指定 height，则块级元素的高度将与其包含的内容一样高，再加上 padding（除非有浮动，对于浮动，请参阅 描述浮动及其工作原理）。
• 如果未指定 width，则非 float-ed 块级元素将扩展以适合其父元素的宽度减去 padding，除非它设置了 max-width 属性，在这种情况下，它将不超过指定的最大宽度。
  • 某些块级元素（例如 table、figure 和 input）具有固有的或默认的宽度值，并且可能不会扩展以填充其父容器的整个宽度。
  • 注意：span 是一个内联级元素，没有默认宽度，因此它不会扩展以适应。
• 元素的 height 由内容的 height 计算。
• 元素的 width 由内容的 width 计算。
• 默认情况下 (box-sizing: content-box)，padding 和 border 不属于元素的 width 和 height。

请注意，margin 不计入盒子的实际大小。它会影响盒子在页面上占用的总空间，但仅限于盒子外部的空间。盒子的区域在 border 处停止——它不会延伸到 margin 中。

额外

查找 box-sizing 属性，该属性会影响元素的总高度和宽度的计算方式。

• box-sizing: content-box: 这是 box-sizing 的默认值，遵循上述规则。

  例如：

  .example {
    box-sizing: content-box;
    width: 100px;
    padding: 10px;
    border: 5px solid black;
  }

  .example 元素实际占用的空间将是 130px 宽（100px 宽度 + 10px 左内边距 + 10px 右内边距 + 5px 左边框 + 5px 右边框）。

• box-sizing: border-box: width 和 height 将包括内容、内边距和边框（但不包括外边距）。这是一种更直观的思考盒子模型的方式，因此许多 CSS 框架（例如 Bootstrap、Tailwind、Bulma）全局设置 * { box-sizing: border-box; }，以便所有元素默认使用这种盒子模型。有关更多信息，请参阅关于 box-sizing: border-box 的问题。

  例如：

  .example {
    box-sizing: border-box;
    width: 100px;
    padding: 10px;
    border: 5px solid black;
  }

  该元素在页面上仍将占用 100px，但内容区域将为 70px 宽（100px - 10px 左内边距 - 10px 右内边距 - 5px 左边框 - 5px 右边框）。

边框和外边距行为

• 边框不会与相邻元素的边框折叠或重叠。每个元素的边框单独渲染。
• 外边距可以折叠，但仅垂直方向，且仅在块级元素之间。水平外边距不会折叠。这意味着如果一个块级元素具有底部外边距，而下一个块级元素具有顶部外边距，则仅使用两者中较大的一个。此行为与 box-sizing 无关，并且是 CSS 中的默认行为。

参考

• 盒子模型 | MDN