必须全局设置, ::before, *::after { box-sizing: border-box; }才真正生效，因box-sizing不继承，仅设父容器或局部元素无效；子元素及伪元素仍按content-box计算，导致padding/border额外撑宽容器。
必须全局设置 *, *::before, *::after 才真正生效，只给父容器或个别元素加 box-sizing: border-box 几乎等于没做。
为什么只给父容器设 box-sizing: border-box 没用
父容器的 box-sizing 只影响它自己的尺寸计算逻辑，完全不传递给子元素。子元素（比如 .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。
如果项目已有重置样式，检查是否漏掉了 ::before 和 ::after——它们常被用于清除浮动或装饰，一旦没设 border-box，也可能导致溢出。
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 注入顺序错乱，首屏闪动，重置样式得提至
最顶部 - 某些框架（如 Bootstrap）自己重写了
box-sizing，但没包含伪元素，导致部分组件仍溢出
盒模型这事，改完不验证等于没改。尤其在混合了 rem/vw 和固定像素 padding 的响应式项目里，小屏下溢出往往更隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
