box-sizing: border-box 全局生效的唯一可靠写法是将 *, *::before, *::after { box-sizing: border-box; } 置于 CSS 文件最顶部；需额外加固表单控件，并注意 flex 子项 min-width、替换元素 max-width 等溢出源头。
直接加 box-sizing: border-box 就能解决，但必须全局设对、覆盖到位，否则等于没设。
为什么写了 box-sizing 还是撑破？
常见错误是只给部分元素写，比如只设 .card { box-sizing: border-box; }，但它的子元素（.card-header、input）仍用默认的 content-box。更隐蔽的是伪元素：::before 和 ::after 若参与布局（如清除浮动、装饰块），漏掉它们也会悄悄撑宽。
- 浏览器不继承
box-sizing，html或body上设了没用 - 第三方 UI 库（如旧版 Bootstrap 3、Element Plus）可能显式重置为
content-box，把你写的通配符覆盖了 - 内联样式里写了
box-sizing: content-box，优先级高于*，得用更具体选择器覆盖
全局生效的唯一可靠写法
把这三行放在整个 CSS 文件最顶部（重置样式之后、业务样式之前）：
*, *::before, *::after {
box-sizing: border-box;
}这个写法覆盖所有元素及其伪元素，避免嵌套计算混乱。注意：
立即学习“前端免费学习笔记（深入）”；
- IE8 支持
box-sizing，但不支持*::before，需兼容 IE8 时改用*:before, *:after（单冒号） - 某些老项目依赖
content-box手动计算（如width: calc(100% - 20px)），加了通配符后会错位，得逐个排查 - 表单控件在旧版 Safari/IE 中偶有 fallback，建议额外加固：
input, textarea, button { box-sizing: border-box; }
border-box 生效后还撑破？盯住这三个地方
box-sizing: border-box 只管 width/height/max-width/min-width 的计算逻辑，但以下情况仍会溢出：
- Flex 子项默认
min-width: auto，长文本或图片会硬顶出去——必须加min-width: 0 -
img、iframe是替换元素，不响应width，得配max-width: 100%和height: auto -
max-width: 400px同样走border-box计算，很多人只改width，结果max-width还是被 padding 推爆
怎么确认它真起作用？
别信代码写了就生效，打开 DevTools 看两处：
- 选中元素 → “Computed” 面板 → 检查
box-sizing值是否为border-box - 同个面板下拉到 “Metrics” → 鼠标悬停在蓝色宽度条上，观察 “Total width” 是否随
padding增减而保持不变
真正容易被忽略的，是伪元素、表单控件、flex 子项的 min-width 行为——它们比 width 本身更常成为溢出源头。
