全局设置 *, *::before, *::after { box-sizing: border-box; } 才有效，仅父容器设置无效，因子元素仍按 content-box 计算；img、svg、iframe 等需额外加 max-width: 100% 等约束。
直接设 box-sizing: border-box 能解决绝大多数宽度溢出问题，但只加在父容器上是无效的——必须全局覆盖所有元素及其伪元素，否则子元素仍按 content-box 计算，padding 和 border 还是会往外叠。
为什么只给父容器设 box-sizing: border-box 没用
父容器设了 box-sizing: border-box，只影响它自己的尺寸计算；它的子元素（比如 .card-header、input、img 的包裹层）默认仍是 content-box。一旦子元素有 padding: 16px 和 border: 1px，再写 width: 100%，实际宽度就是 100% + 32px + 2px，必然撑破。
常见错误现象包括：
- 卡片内标题文字右侧被切掉
- 表单输入框在小屏下横向溢出，触发滚动条
- Flex 容器里
input和按钮并排时按钮被挤到下一行或溢出
真正起效的写法只有这一种：
*, *::before, *::after {
box-sizing: border-box;
}
注意：html, body { box-sizing: border-box } 不行，不继承；*:not(img) 这类排除写法也不推荐，容易漏掉关键元素（如 svg、iframe 的 wrapper）。
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 -
table：无视max-width和box-sizing，得配table-layout: fixed+width: 100% - 带
white-space: nowrap的文本：需要overflow: hidden+text-overflow: ellipsis或word-break: break-word
Flex/Grid 布局中仍溢出？检查这些地方
现代布局引擎对 border-box 支持良好，但 Flex/Grid 有自己的收缩规则，容易掩盖盒模型问题：
- Grid 容器溢出时，
overflow: hidden常失效——因为轨道被撑开了，得加min-width: 0到容器，并把1fr改成minmax(0, 1fr) - Flex 子项写了
width: 100%，反而会锁死弹性行为；优先用flex: 1或flex: 0 1 auto - 绝对定位子元素（如弹窗浮层）：仅靠
box-sizing不够，父容器必须有position: relative，子元素要用width: 100%替代固定值
兼容性和调试建议
box-sizing 在 IE8+ 原生支持，无需前缀；现代项目基本不用考虑 IE7 及更早版本。
调试时别只看样式面板里的 width 值——打开浏览器的「Layout」或「Box Model」面板，逐层查看每个元素的 content/padding/border 实际像素值。特别注意伪元素（::before、::after），它们常被用于清除浮动或装饰，一旦漏设 border-box，就可能悄悄撑开布局。
最易被忽略的点：全局重置后，第三方 UI 库（如 Ant Design、Element Plus）的组件样式可能覆盖你的 box-sizing 规则，记得在它们之后加载重置，或用 !important 强制（仅限兜底）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
