width: 100%仍撑破容器是因为默认box-sizing: content-box使width仅含内容区，padding和border额外叠加；必须全局重置, ::before, *::after { box-sizing: border-box; }并单独约束替换元素、Flex子项及表格。
直接加 box-sizing: border-box 不够，必须全局重置并配合子元素级控制，否则 padding 和 border 仍会叠加出界。
为什么 width: 100% 还是撑破容器
因为默认 box-sizing: content-box 下，width: 100% 只管内容区，加上 padding 和 border 后总宽 = 100% + 左右 padding + 左右 border。比如父容器宽 300px，子元素设了 width: 100%、padding: 10px、border: 2px，实际占宽就是 324px。
常见错误现象包括：横向滚动条意外出现、卡片边框被截断、表单输入框右侧溢出。
- 只给父容器设
box-sizing: border-box没用——它不继承，子元素仍按content-box计算 - 全局重置漏掉
*::before和*::after，伪元素可能悄悄撑开布局（尤其用于清除浮动或装饰时） -
input、textarea等表单控件自带浏览器默认padding和border，且默认box-sizing: content-box，必须单独加固
必须全局重置 box-sizing
最稳妥写法是：
*, *::before, *::after {
box-sizing: border-box;
}
这个规则覆盖所有元素及其伪元素，避免嵌套层级中某一层漏掉导致计算错乱。
- 不要用
html, body { box-sizing: border-box; }——它不会向下传递 - IE8+ 原生支持，无需前缀；老项目若需兼容 IE7，得另寻方案（但 2026 年基本可忽略）
- 重置后，旧代码若依赖
content-box手动计算（比如width: calc(100% - 20px)来抵消 padding），要同步调整
box-sizing 解决不了的三类溢出
box-sizing: border-box 只修正尺寸计算逻辑，对以下情况无效，必须额外处理：
-
img、svg、iframe等替换元素：必须加max-width: 100%和height: auto，否则原始尺寸照常溢出 - Flex 子项含长文本或 URL：即使
box-sizing正确，也要加min-width: 0解锁收缩能力，再配overflow-wrap: break-word - 表格（
table）：无视max-width和box-sizing，得用table-layout: fixed+width: 100%
移动端和响应式场景下的隐藏陷阱
用 vw 或 rem 设宽（如 width: 90vw）看起来安全，但一旦加了 padding 或 border，总宽就变成 90vw + 2×padding，窄屏下照样突破视口。
键盘弹出时 viewport 缩放可能临时改变计算逻辑，min-width: 0 有时能辅助修复这种抖动。
最容易被忽略的一点：你在 DevTools 里看到某个元素“宽度刚好等于父容器”，却仍有横向滚动条——大概率是某个未重置的伪元素、图片或 Flex 子项在背后悄悄溢出，box-sizing 管不了内容本身会不会撑开边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
