17370845950

box-sizing 是控制 width/height 计算范围的属性，默认 content-box（仅内容），推荐全局设为 border-box（内容+内边距+边框），确保所见即所得；需包含伪元素，margin 不受其影响。

box-sizing 是控制 width/height “算谁的宽度” 的开关

它不改变元素外观，只改你写的 width: 200px 到底指哪一段：是纯内容（content-box），还是内容+内边距+边框（border-box）。浏览器默认用前者，但几乎所有现代项目都立刻切到后者——因为不切，布局就容易“悄悄变宽”，尤其在 flex/grid 或百分比宽度下。

为什么必须全局设成 border-box？

不设的话，哪怕两个元素都写 width: 50%，只要其中一个有 padding: 10px 或 border: 1px，它就会撑出父容器（总宽 > 100%），导致换行、错位或横向滚动条。而 border-box 让你写的宽度就是它最终占的宽度，所见即所得。

• 推荐写法（覆盖所有元素和伪元素）：

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

• 别只写 * { box-sizing: border-box; } ——漏掉伪元素（比如 ::before 常用于图标、装饰）会导致它们仍按 content-box 计算，引发意外溢出
• IE8 需加前缀：-ms-box-sizing: border-box;，但当前已极少需兼容

content-box 和 border-box 的实际尺寸差异

看这个对比最直观：

.cbox {
  box-sizing: content-box;
  width: 200px;
  padding: 15px;
  border: 3px solid #333;
}
.bbox {
  box-sizing: border-box;
  width: 200px;
  padding: 15px;
  border: 3px solid #333;
}

• .cbox 实际总宽 = 200 + 15×2 + 3×2 = 236px
• .bbox 实际总宽 = 200px（内容区自动压缩为 200 − 30 − 6 = 164px）
• 两者背景、边框、内边距视觉效果完全一样，但盒模型“归属权”不同

容易被忽略的坑：margin 不受 box-sizing 影响

box-sizing 只管 width/height 怎么算，margin 始终在盒子外部，永远额外加。所以即使用了 border-box，如果父容器没留够 margin 空间，照样会挤出边界或重叠。

• 常见误判：“我用了 border-box，怎么还溢出了？” → 八成是忘了 margin 或父容器 padding 不足
• 调试建议：用浏览器开发者工具选中元素，看右侧“Computed”面板里的 width 和 margin 分开显示，确认哪部分真正占空间

实际开发中，box-sizing: border-box 是布局的地基——不是“可选项”，而是“不设就大概率出问题”的硬性前提。真正复杂的地方不在属性本身，而在它和 flex、grid、百分比、缩放（transform: scale）等特性叠加时的隐式交互，这些才是需要现场调试的点。