<p>必须全局设置 , ::before, *::after { box-sizing: border-box; } 才真正生效，因 box-sizing 不继承，仅设父容器无效；伪元素未重置仍按 content-box 计算，易导致布局溢出；还需配合 max-width: 100%、min-width: 0 等处理替换元素和文本溢出。</p>
直接写 * , *::before, *::after { box-sizing: border-box; } 才真正起效，只给父容器或个别元素加 box-sizing: border-box 基本等于没做。
为什么只设父容器的 box-sizing 没用
父容器的 box-sizing 只影响它自己的尺寸计算逻辑，对子元素完全无作用。子元素（比如 input、.card-header、img 的包裹层）默认仍是 content-box。一旦它有 padding: 16px 和 border: 1px，再写 width: 100%，实际宽度就是 100% + 32px + 2px——必然撑破父容器。
- 常见错误现象：卡片标题文字右侧被切掉、表单输入框小屏下横向溢出、Flex 容器里按钮被挤到下一行
-
html, body { box-sizing: border-box }不行，因为box-sizing不继承 -
*:not(img)这类排除写法也不推荐，容易漏掉svg、iframe等关键替换元素的 wrapper
必须覆盖伪元素，否则悄悄撑开布局
很多组件依赖 ::before 或 ::after 实现清除浮动、装饰边框、图标插入等功能。如果它们没设 box-sizing: border-box，照样按 content-box 计算，padding/border 会额外叠加。
- 检查项目已有重置样式，确认是否漏掉了
*::before, *::after - Bootstrap 等框架自带的重置通常不含伪元素，部分组件仍会溢出
- CSS-in-JS 库（如 styled-components）可能因 SSR 注入顺序错乱导致首屏闪动，重置样式得提至
<head>最顶部
box-sizing: border-box 解决不了的三类溢出
它只改尺寸计算逻辑，不约束内容本身是否溢出。以下情况即使开了 border-box，仍需额外处理：
立即学习“前端免费学习笔记（深入）”；
-
img、svg、iframe：必须加max-width: 100%和height: auto（iframe还要补width: 100%） - Flex 子项中的替换元素（
input、button、textarea）：默认min-width: auto会阻止收缩，得显式写min-width: 0 - 带
white-space: nowrap的文本：需要overflow: hidden+text-overflow: ellipsis或word-break: break-word
调试时最容易忽略的三件事
别只信代码写了，要进浏览器开发者工具「Computed」面板确认目标元素的 box-sizing 值确实是 border-box。
- 其他样式规则优先级更高，覆盖了你的
box-sizing - 某些框架（如 Ant Design）内部用了
!important，比如.ant-input { box-sizing: content-box !important } - 微信 X5 内核（v3.7 以下）对
*::before、*::after的重置支持不稳定，可兜底加一句html { box-sizing: border-box; }
真正麻烦的不是写那三行重置，而是你改完之后，旧代码里靠“故意多留 content 宽度来抵 padding”的写法会突然失效，得逐个检查数值是否还合理。
