全局设置 *, *::before, *::after { box-sizing: border-box; } 才能真正解决宽度溢出问题，仅父容器设置无效；它不解决 img、svg、iframe、table、nowrap 文本等内容溢出，需额外处理。
直接用 box-sizing: border-box 能解决绝大多数宽度溢出问题，但必须全局设置 *、*::before、*::after 三者，否则子元素或伪元素仍按 content-box 计算，padding 和 border 会悄悄往外叠。
为什么只给父容器加 box-sizing: border-box 没用
父容器设了 box-sizing: border-box，只影响它自己的尺寸计算逻辑，对子元素完全无感。子元素（比如 .input-field、.card-header、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 - 如果项目用了 Bootstrap 或其他框架，检查它们的重置样式是否包含
::before和::after；没包含的话，组件内部的伪元素仍可能溢出
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
调试时最容易忽略的三件事
别只信代码写了，要进浏览器开发者工具「Computed」面板确认目标元素的 box-sizing 值确实是 border-box。常见失效原因：
- 其他样式规则优先级更高，覆盖了你的
box-sizing - CSS-in-JS 库（如
styled-components）SSR 注入顺序错乱，首屏闪动，重置样式得提至<head>最顶部 - 某些框架（如 Bootstrap）自己重写了
box-sizing，但没包含伪元素，导致部分组件仍溢出
尤其在混合了 rem/vw 和固定像素 padding 的响应式项目里，小屏下溢出往往更隐蔽——不是没发生，是还没被你看见。
