box-sizing: border-box 本身不防止撑大，仅确保 width/height 包含 padding 和 border；撑大主因常是子元素未继承、伪元素遗漏、margin 合并、flex 最小尺寸限制或替换元素未约束。
box-sizing: border-box 本身不防止盒子被撑大，它只确保你写的 width/height 是最终渲染尺寸——但 padding 和 border 不再额外加在外部；真正让盒子“看起来没撑大”的前提，是你没写错目标元素、没漏掉伪元素、也没混淆 margin 的行为。
为什么设了 box-sizing: border-box 还是撑开了？
常见错误不是属性没生效，而是作用对象错了：
- 只给父容器设
box-sizing: border-box，但子元素（比如input、div）仍是content-box—— 它们加了padding或border后依然会超宽 - 忘了重置伪元素：
*::before和*::after默认走content-box，如果用它们画边框或装饰，也会撑开布局 - 把
margin当成“撑大原因”：比如子元素margin-top: 20px导致父容器顶部空出 20px，这不是box-sizing能管的，是外边距合并（margin collapse） - 第三方 UI 库（如 Element Plus）的 CSS 在你的样式之后加载，覆盖了全局
* { box-sizing: border-box }
必须这么写才真正生效
全局重置是最稳妥的做法，但细节决定成败：
- 写在所有 CSS 文件最顶部，或至少在引入第三方样式表 之后 加载
- 必须包含伪元素：
* { box-sizing: border-box; }不够，要写* { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; }，或者更简洁地：*, *::before, *::after { box-sizing: border-box; } - 对表单控件加固（尤其旧版 Safari）：
input, textarea, button, select, img { box-sizing: border-box; } - 检查开发者工具的 “Computed” 面板，确认目标元素的
box-sizing值确实是border-box，且没有被[style]内联样式覆盖
flex/grid 里还是撑开？那不是 box-sizing 的锅
即使 box-sizing 正确，子项在 display: flex 容器中仍可能横向溢出，根本原因是浏览器默认给内容设置了 min-width: auto：
-
min-width: auto会阻止子项收缩到比其内容更窄，哪怕你写了flex-shrink: 1 - 解决方法是显式加
min-width: 0（水平流）或min-height: 0（垂直流）到需要收缩的子元素上 - 图片、
iframe等替换元素还需额外加max-width: 100%和height: auto，否则box-sizing对它们无效 - 长单词或 URL 溢出？补
word-break: break-all或overflow-wrap: break-word
hover 加边框导致跳动？别怪 box-sizing
这是渲染时尺寸突变引发的重排，box-sizing 没法动态修正已渲染的布局：
- 正确做法是预留空间：初始写
border: 2px solid transparent，hover 时只改border-color - 避免用
outline替代边框——它不参与盒模型计算，也不支持border-radius，还可能和焦点边框冲突 -
box-shadow: 0 0 0 2px #000是视觉替代方案，不占布局空间，但无法实现虚线、双线等 border 特性 - 负 margin 抵消（如
margin: -2px）在响应式下极难维护，不推荐
真正容易被忽略的是：box-sizing 只控制 width/height 如何解释，它不管 margin、不干预文档流、也不影响 position: absolute 的偏移基准。如果你发现“撑大”现象还在，先打开开发者工具看清楚——到底是 padding/border 导致的尺寸膨胀，还是 margin 合并、flex 最小尺寸限制、或是替换元素原始尺寸作祟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
