必须全局设置 *, *::before, *::after { box-sizing: border-box; } 才真正生效，因 content-box 下 width 不含 padding/border，易致布局溢出；该规则不解决替换元素、flex 子项 min-width、表格及文本换行等问题。
直接用 box-sizing: border-box 就能解决——不是“可以试试”，而是现代项目里几乎必须加的兜底规则。关键不在“用不用”，而在“怎么设才真正生效”。
为什么 width 会“被撑开”？content-box 的真实行为
标准盒模型（box-sizing: content-box）下，width 和 height 只管内容区。加了 padding 或 border，浏览器会把它们额外“加”上去，不是 bug，是规范定义。
比如：width: 200px; padding: 10px; border: 2px solid #000;，真实总宽是 200 + 10×2 + 2×2 = 224px。
常见翻车场景：
- Grid 或 Flex 容器里子项设了
width: 100%，结果因padding/border溢出父容器 - 表单控件（如
input、textarea）加了padding后横向滚动或换行 - 响应式断点下，
calc(50% - 10px)配合padding后布局错位
全局设置 box-sizing: border-box 的正确写法
只给某个 .card 加 box-sizing: border-box 不够——它的子元素（比如 .card-header）若仍是 content-box，padding 还是会往外叠。
真正起效的方式是统一重置：
*, *::before, *::after {
box-sizing: border-box;
}
这个写法覆盖所有元素及其伪元素，避免嵌套计算混乱。注意：
- 别用
html, body { box-sizing: border-box }——它不向下继承，子元素依然默认content-box - 某些第三方 UI 库（如早期 Bootstrap 3）已内置类似重置，重复设置可能干扰其内部计算
- IE8+ 原生支持
box-sizing，无需前缀；旧版 Safari 的-webkit-box-sizing现在基本可忽略
box-sizing: border-box 解决不了的边界情况
box-sizing 只管 width/height 与 padding/border 的关系，对以下情况无直接作用：
-
img、svg、iframe等替换元素：必须额外加max-width: 100%和height: auto - flex 子项含
min-width: auto（如input、button）：即使box-sizing正确，也要显式设min-width: 0才能收缩 - 表格（
table）：无视max-width和box-sizing，得靠table-layout: fixed+width: 100% -
white-space: nowrap的文本：box-sizing不影响换行逻辑，需配合overflow-wrap: break-word或text-overflow: ellipsis
调试时如何确认 box-sizing 是否真正生效
Chrome DevTools 中选中元素，在「Computed」面板里搜 box-sizing，确认值是 border-box；再看 width 和「computed width」是否一致：
- 如果
width显示的是你写的数值（比如200px），且旁边border-left-width明确标出2px，说明已生效 - 如果
width显示的是224px（200 + 2×10 + 2×2），那就是还在content-box模式 - 一个容易被忽略的点：CSS 优先级。如果你在某个组件里写了
box-sizing: content-box !important，那全局重置就失效了——得去翻具体组件的样式来源
最常被漏掉的其实是伪元素和替换元素：哪怕全局重置写对了，::before 里加了个带 border 的装饰块，或者一张没设 max-width 的 img，照样会悄悄撑破布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
