必须全局设置 , ::before , *::after { box-sizing: border-box } 才有效，仅设父容器无效，因子元素仍用 content-box；还需配合 max-width: 100%、min-width: 0、table-layout: fixed 等处理特定溢出场景。
直接用 box-sizing: border-box 能解决绝大多数因 padding 和 border 导致的宽度溢出，但只给父容器或个别元素加它，基本等于没做。
为什么只写 box-sizing: border-box 在父容器上无效
父容器的 box-sizing 只影响它自己的尺寸计算，子元素（比如 .input-field、.card-header、input）默认仍是 content-box。一旦子元素有 padding: 12px 和 border: 1px，再写 width: 100%，实际宽度就是 100% + 24px + 2px——必然撑破。
- 常见错误现象：卡片标题文字被切掉、表单输入框小屏下横向滚动、Flex 容器里按钮被挤到下一行
- 伪元素（
::before、::after）也得覆盖，它们常被用于清除浮动或装饰，漏掉就会悄悄撑开布局 -
html, body { box-sizing: border-box }不行，它不继承；*:not(img)这类排除写法也不推荐，容易漏掉svg、iframe的 wrapper
真正起效的写法只有一种：全局重置
必须一次性覆盖所有元素及其伪元素：
*, *::before, *::after {
box-sizing: border-box;
}
- 这个规则要放在 CSS 文件最前面，或
中最早加载的位置，避免被第三方库（如 Bootstrap、Ant Design）覆盖 - 某些框架自己重写了
box-sizing，但没包含伪元素，导致部分组件仍溢出 - 老项目不敢动全局？优先加在高频出问题的选择器上：
input、textarea、select、.form-group > *、.card-content
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 注入顺序错乱，首屏闪动，重置样式得提至
最顶部 - 微信 X5 内核（v3.7 以下）对
*::before、*::after的重置支持不稳定，可兜底加一句html { box-sizing: border-box; }
尤其在混合了 rem/vw 和固定像素 padding 的响应式项目里，小屏下溢出往往更隐蔽，得靠「Computed」逐层点开看真实值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
