content-box是CSS默认盒模型，width/height仅指内容区，padding和border额外撑开尺寸；它易导致布局溢出、换行等错乱，仅适用于SVG容器等少数需内容尺寸绝对固定的场景。
content-box 是默认值，但不等于“该用就用”
绝大多数情况下，content-box 不是主动选择的结果，而是你没写 box-sizing 时的 fallback。它只在极少数明确需要“内容尺寸绝对固定、且 padding/border 必须向外撑开”的场景下才值得保留——比如某些 SVG 内嵌容器、旧版 IE 兼容兜底（已基本淘汰）、或需要与 legacy JS 尺寸计算逻辑强对齐的组件。
哪些情况会意外触发 content-box 的坑
当你写 width: 100% 的子元素，又加了 padding: 16px 和 border: 1px solid，却没设 box-sizing: border-box，结果就是实际宽度 = 100% + 32px + 2px，直接溢出父容器。这种问题在 Flex/Grid 子项、表单控件（input、textarea）、卡片布局中高频出现。
-
input元素默认是content-box，但浏览器 UA 样式常已重置，自行覆盖时容易漏掉 - 第三方 UI 库（如 Ant Design、Element Plus）内部大多已设
border-box，但若你全局重置被覆盖，或局部覆盖了其样式，就会暴露问题 - 用
calc(50% - 1px)配合content-box时，padding 变动会导致计算失效，而border-box下只需调一次
border-box 全局重置为什么不能省略
只给某个 class 加 box-sizing: border-box 不够。伪元素（::before、::after）默认仍是 content-box，一旦你用它们做装饰性边框或遮罩，尺寸就失控。标准写法必须带通配：
*, *::before, *::after {
box-sizing: border-box;
}注意：IE8 需要 -ms-box-sizing 前缀，但 2026 年已无必要；Safari 5.1+、Firefox 29+、Chrome 10+ 均原生支持，无需前缀。
立即学习“前端免费学习笔记（深入）”；
offsetWidth / getBoundingClientRect 受 box-sizing 直接影响
JavaScript 读取尺寸时，element.offsetWidth 返回的是渲染后的总宽度，它严格遵循当前元素的 box-sizing 值。如果你在 content-box 下监听 resize 并做逻辑判断，换到 border-box 环境里，同一段代码可能因 padding 变化导致 offsetWidth 不变而误判——这不是 bug，是盒模型切换带来的语义差异。
真正容易被忽略的点在于：这个影响是隐式的。你改了 CSS 的 box-sizing，但 JS 里没做任何调整，结果布局看似正常，交互逻辑却在边界条件下悄悄失效。
