box-sizing: border-box 是最根本解法，因它使 width 包含 padding 和 border，避免 content-box 下宽度叠加超标；必须全局设置 , ::before, *::after 以覆盖所有元素及伪元素，否则子元素仍按 content-box 计算导致溢出。
直接结论：用 box-sizing: border-box 是最根本、最通用的解法，但必须全局或逐层显式设置，不能只设父容器而忽略子元素。
为什么 content-box 默认会让宽度“超标”
默认的 box-sizing: content-box 意味着你写的 width: 400px 只算内容区，padding: 20px 和 border: 2px 会额外加在 400px 外面——实际占宽变成 444px。这种叠加在嵌套结构里会层层放大，尤其在卡片、表单、弹窗等固定宽度容器中，溢出几乎是必然的。
- 常见错误现象：
max-width: 100%无效、横向滚动条意外出现、width: 100%的子元素仍撑破父容器 - 典型场景：带 padding 的标题、有边框的输入框、flex 子项内嵌图片或文本
- 兼容性影响：IE8+ 原生支持
box-sizing，无需前缀；IE7 及更早版本不支持，但现代项目基本可忽略
必须全局设置，否则等于白设
只给某个 .card 加 box-sizing: border-box 不够——它的子元素（比如 .card-header）若仍是 content-box，那 padding 还是会往外叠。真正起效的方式是统一重置：
*,
*::before,
*::after {
box-sizing: border-box;
}
- 这个写法覆盖所有元素及其伪元素，避免嵌套计算混乱
- 不要用
html, body { box-sizing: border-box }，它不向下继承，子元素依然默认content-box - 如果项目已有重置样式，检查是否漏掉了
::before和::after——它们常被用于清除浮动或装饰，一旦没设border-box，也可能悄悄撑开布局
box-sizing 不是万能药，这些地方还得单独处理
box-sizing: border-box 解决的是尺寸计算逻辑问题，但对以下情况无直接作用：
-
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
最容易被忽略的一点：当你在调试工具里看到元素宽度“刚好”等于父容器，却仍有横向滚动条，大概率是某个子元素（比如伪元素、未重置的 img 或 flex 项）悄悄溢出了——box-sizing 只管尺寸定义方式，不管内容本身会不会撑开边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
