box-sizing: border-box必须全局设对、覆盖到位才能生效；常见失效原因是仅局部设置、遗漏伪元素、被第三方库或内联样式覆盖，以及Flex子项min-width、替换元素max-width等未同步处理。
直接设 box-sizing: border-box 就能解决，但必须全局写对、覆盖到位，否则等于没设。
为什么写了 box-sizing: border-box 还是撑破？
常见错误不是语法错，而是生效范围漏了：
- 只给部分元素写（比如只设
.card { box-sizing: border-box; }），但它的子元素（.card-header、input）仍用默认的content-box - 漏掉伪元素：
::before和::after若参与布局（如清除浮动、装饰块），也会悄悄撑宽 -
box-sizing不继承，写在html或body上完全无效 - 第三方 UI 库（如旧版 Bootstrap 3、Element Plus）可能显式重置为
content-box，把你写的通配符覆盖了 - 内联样式里写了
box-sizing: content-box，优先级高于*，得用更具体选择器覆盖
全局生效的唯一可靠写法
把这三行放在整个 CSS 文件最顶部（重置样式之后、业务样式之前）：
*, *::before, *::after {
box-sizing: border-box;
}
这个写法覆盖所有元素及其伪元素，避免嵌套计算混乱。注意：
- IE8 支持
box-sizing，但不支持双冒号伪元素语法，需兼容 IE8 时改用*:before, *:after - 某些老项目依赖
content-box手动计算（如width: calc(100% - 20px)），加了通配符后会错位，得逐个排查
border-box 生效后还撑破？盯住这三个地方
box-sizing: border-box 只管 width/height/max-width/min-width 的计算逻辑，但以下情况仍会溢出：
- Flex 子项默认
min-width: auto，长文本或图片会硬顶出去——必须加min-width: 0 -
img、iframe是替换元素，不响应width，得配max-width: 100%和height: auto -
max-width: 400px同样走border-box计算，很多人只改width，结果max-width还是被padding推爆
怎么确认它真起作用？
别信代码写了就生效，打开 DevTools 看两处：
- 选中元素 → “Computed” 面板 → 检查
box-sizing值是否为border-box - 同个面板下拉到 “Metrics” → 鼠标悬停在蓝色宽度条上，观察 “Total width” 是否随
padding增减而保持不变
真正容易被忽略的，是伪元素、表单控件、flex 子项的 min-width 行为——它们比 width 本身更常成为溢出源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
