box-sizing: border-box 指 width 包含 padding 和 border，避免内容撑破容器；本质是覆盖默认的 content-box 计算逻辑；全局启用推荐 *, *::before, *::after { box-sizing: border-box; }，但需注意第三方组件兼容性。
box-sizing: border-box 是什么，为什么它能治撑破
容器宽度被内容撑开，本质是浏览器默认用 content-box 算宽：你写 width: 200px，实际可用内容区只有 200px，padding 和 border 还要额外加进去。一加就超，父容器不设 overflow 就直接溢出。
改成 border-box 后，width 指的是“最外边框的总宽”，padding 和 border 都往里扣，不往外涨——这才是人直觉里的“这个盒子就是 200px 宽”。
怎么全局启用，又不破坏第三方组件样式
直接给 * { box-sizing: border-box; } 最省事，但风险在第三方 UI 库（比如某些老版本 Element UI 或自定义 Web Component）可能显式写了 box-sizing: content-box 来适配旧逻辑，强行覆盖会错位。
稳妥做法：
立即学习“前端免费学习笔记（深入）”；
- 用
*, *::before, *::after { box-sizing: border-box; }—— 覆盖伪元素，避免 Flex/Grid 子项漏掉 - 在重置 CSS（如 normalize.css）之后、业务样式之前引入
- 若集成的组件库有明确文档说“需配合 border-box”，放心全量；否则先局部加在业务容器上，例如
.app-main { box-sizing: border-box; }
flex 容器里 padding 撑破？border-box 不管用时看这里
即使用了 border-box，Flex 项目仍可能撑破——常见于父容器设了 flex: 1 但子项没设 min-width: 0。浏览器默认 min-width: auto，会阻止收缩，导致内容宽 > 可用空间时硬顶出去。
这时光靠 box-sizing 没用，得配着改：
- Flex 子项加
min-width: 0（文本、图片、内联块都适用） - 如果子项是
input或textarea，它们默认min-width: min-content，必须显式覆盖 - 慎用
white-space: nowrap—— 它会让单行文本拒绝折行，直接撑破
IE8 兼容？别硬扛，换思路
box-sizing 在 IE8+ 支持，但 IE8 只认带前缀的 -ms-box-sizing，且 flex 布局完全不支持。如果真要兼容 IE8：
- 放弃
flex，改用display: table-cell或 float + margin 负值模拟布局 - 所有宽度相关计算手动减去 padding/border，例如
width: calc(100% - 20px)（20px = 左右 padding + border） - 更现实的做法：确认是否真有 IE8 用户；若有，用条件注释加载独立降级样式，而不是让现代代码迁就它
真正容易被忽略的，是 box-sizing 对 max-width 和 min-width 的影响同样生效——很多人只记得改 width，结果 max-width: 300px 还是被 padding 推爆，因为没意识到它也走同一套计算规则。
