盒模型

CSS 盒模型（Box Model）是 CSS 布局的基础：渲染引擎把元素表示为矩形盒子，由内到外依次是内容、内边距、边框、外边距。width / height 究竟作用在哪一层，由 box-sizing 决定；弄清这一点，才能正确理解 Flex、Grid 等布局中的尺寸行为。

块级、行内块、flex/grid 子项等都按盒模型计算尺寸。纯行内非替换元素（如 <span>）虽有 padding、border、margin，但通常不能通过 width / height 指定盒尺寸；行盒高度主要由 line-height 等决定，边框与内边距会画在内容周围。

盒模型的组成

规范用四条边界划分区域：内容边界（content edge）→ 内边距边界 → 边框边界 → 外边距边界（margin edge）。对应四个区域：

与布局尺寸相关的补充：

• outline：画在边框外侧，用于焦点环等，不参与盒模型宽度/高度计算，也不占据布局空间（可能与边框重叠显示）。
• box-shadow：阴影同样不扩大布局盒尺寸（除非配合其他属性产生交互）。
• 百分比 padding / margin：水平与垂直方向的百分比，参照物通常都是包含块（containing block）的宽度（规范统一规则，并非“竖直方向参照高度”）。

      +-------------------------------+
      |          Margin (外边距)        |  <- 透明，margin-box 外侧
      |   +-----------------------+   |
      |   |    Border (边框)      |   |  <- border-box 边界
      |   |   +---------------+   |   |
      |   |   |  Padding (内边距) |   |  <- 背景可延伸至此
      |   |   |   +-------+   |   |   |
      |   |   |   |Content|   |   |   |  <- content-box 边界
      |   |   |   +-------+   |   |   |
      |   |   +---------------+   |   |
      |   +-----------------------+   |
      +-------------------------------+

盒模型的类型（box-sizing）

width / height 指定的是哪一种“盒”的宽高，由 box-sizing 控制。margin 永远不计入 width / height。

标准盒模型（content-box，初始值）

width 只约束内容区；padding、border 加在内容区外侧，元素在页面上会“变胖”。

• border box 宽度（常称元素盒宽度，不含 margin）：
  width + padding-left + padding-right + border-left-width + border-right-width
• 布局占用宽度（margin box）：再加上左右 margin

示例：width: 200px，padding: 20px，border: 10px solid（四边相同）→ border box 宽度
200 + 20×2 + 10×2 = 260px。

边框盒模型（border-box）

width 表示整个 border box 的宽度；增加 padding 或 border 会压缩内容区，border box 总宽保持不变（在 width 已确定、且无 min/max 冲突时）。

• border box 宽度：等于 width
• 内容区宽度：width - padding-left - padding-right - border-left-width - border-right-width

同上数值：border box 恒为 200px；内容区约 200 - 40 - 20 = 140px。height 与 width 规则对称。

“怪异盒模型”来自早期 IE 在怪异模式（Quirks Mode）下的行为；现代规范请使用 border-box 这一正式术语。

如何切换盒模型？

box-sizing 初始值为 content-box，且不可继承（inherit 除外）。常见两种全局策略：

/* 策略 A：通配符直接设为 border-box */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 策略 B：在根元素设定，子元素继承（便于组件库局部改回 content-box） */
html {
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
}

单个元素可覆盖为 content-box 或 border-box。引入第三方组件库时，若对方按 content-box 设计尺寸，混用全局 border-box 可能导致对不齐，需在组件根节点单独设回 content-box。

外边距折叠（margin collapsing）

仅发生在块级格式化上下文中，且只影响垂直方向相邻外边距（水平方向相邻 margin 不折叠）。典型情况：

• 相邻兄弟块元素的上下 margin 相遇；
• 父元素与第一个/最后一个子元素的 margin 相遇（中间无 border、padding、行内内容等隔开时）；
• 空块元素自身的上下 margin 相遇。

折叠后取较大的正 margin；若均为负值则取绝对值最大者；一正一负则代数相加。
注意：display: flex 或 display: grid 的 flex/grid 容器不会发生子项之间的外边距折叠。

调试与实践

• 浏览器开发者工具（Chrome / Firefox / Safari 等）的 Layout / 盒模型 面板可直观看到 content、padding、border、margin 各层数值。
• 全局 border-box 便于“设多宽就是多宽”的心算；表单控件在部分浏览器中默认接近 border-box，与通配重置混用时需留意一致性。
• 使用 width: 100% 的同时再加 padding 时，content-box 容易撑破父级；border-box 更易保持在父级宽度内。
• min-width / max-width 约束的是用于布局的宽度（对 border-box 即 border box）；与 Flex 联用时，flex 项默认 min-width: auto 会阻止收缩到小于内容，溢出时常设 min-width: 0。

总结

• 四层：Content → Padding → Border → Margin；outline、阴影不改变布局盒尺寸。
• content-box（默认）：width 只管内容区；padding / border 叠在外面。
• border-box：width 含内容、padding、border；改 padding / border 主要挤压内容区。
• margin 不计入 width，但影响与相邻元素的间距；块级垂直方向注意 margin 折叠 与 flex/grid 的例外。
• 推荐在项目中统一 box-sizing；与旧组件或设计稿按“内容区宽”对齐时，局部使用 content-box。

参考文献

以下链接在编写时均可正常访问：