box-sizing: border-box 是解决宽度超出问题最根本的手段，但必须全局设置 、::before、*::after 以覆盖所有元素及伪元素，否则子元素仍按 content-box 计算导致溢出；它不解决 img/svg/iframe/table/nowrap 文本等固有溢出问题，需额外处理。
直接结论：box-sizing: border-box 是解决宽度超出问题最根本的手段，但只给个别元素加它基本无效——必须全局覆盖所有元素及伪元素，否则子项仍按 content-box 计算，padding 和 border 依然往外叠。
为什么只设父容器的 box-sizing: border-box 没用
父容器的 box-sizing 只影响它自己的尺寸计算逻辑，对子元素毫无作用。子元素（比如 input、.card-header、textarea）默认仍是 content-box。一旦它们有 padding: 12px 和 border: 1px，再写 width: 100%，实际宽度就是 100% + 24px + 2px，必然撑破父容器。
常见翻车现象包括：
- 卡片标题文字右侧被切掉
- 小屏下
input触发横向滚动条 - Flex 容器里按钮被挤到下一行
真正起效的写法：必须包含伪元素
仅写 * { box-sizing: border-box; } 不够，因为 ::before 和 ::after 仍走默认 content-box。而很多清除浮动、装饰性内容都靠伪元素实现，漏掉它们就等于留了个隐形漏洞。
正确且唯一推荐的写法是：
*, *::before, *::after {
box-sizing: border-box;
}
这个规则要放在 CSS 文件最顶部，或 中最早加载的位置。否则容易被 Bootstrap、Ant Design 等第三方库覆盖。
注意：html, body { box-sizing: border-box; } 不行——它不继承；*:not(img) 这类排除写法也不可靠，容易漏掉 svg、iframe 的 wrapper 元素。
box-sizing: border-box 解决不了哪些溢出
它只改 width/height 的计算方式，不约束内容本身是否溢出。以下情况即使开了 border-box，仍需额外处理：
-
img、svg、iframe：必须加max-width: 100%和height: auto（iframe还得补width: 100%） - Flex 子项中的
input、button：默认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
改完不验证等于没改
别只信代码写了，进浏览器开发者工具「Computed」面板，确认目标元素的 box-sizing 值确实是 border-box。常见失效原因：
- 其他样式优先级更高，覆盖了你的
box-sizing - CSS-in-JS 库（如 styled-components）SSR 注入顺序错乱，首屏闪动
-
margin导致溢出——box-sizing对margin完全无效，它只管 content/padding/border -
table、td默认无视box-sizing，必须显式声明
最常被忽略的是：不是所有“溢出”都来自盒模型膨胀，得先确认是尺寸叠加问题，还是布局逻辑、文本流或渲染层导致的视觉错觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
