设置 box-sizing: border-box 能避免 width: 100% 溢出，因其将 padding 和 border 计入 width 内，而非额外增加；全局启用需写 , ::before , *::after { box-sizing: border-box; }，并用 Computed 面板验证生效。
为什么设置 box-sizing: border-box 能避免“明明写了 width: 100% 却溢出”的问题
因为默认的 content-box 模式下，width: 100% 只管内容区，一旦加了 padding: 12px 或 border: 1px，总宽就变成 100% + 24px + 2px——父容器装不下，立刻触发横向滚动条或换行。
而 border-box 把 padding 和 border “收进”设定值里：width: 100% 就是真·占满父容器，内边距和边框只是往里挤内容，不往外撑。
- 常见错误现象：表单输入框
input[type="text"] { width: 100%; padding: 8px; }在content-box下必溢出 - 响应式场景中，
width: 50%的两栏卡片加了padding: 1rem后直接错位换行 - Flex/Grid 子项设了
flex: 1或grid-column: span 2时，width本身可能不生效，但box-sizing仍影响其内部 padding/border 的占位逻辑
如何安全、一次性全局启用 border-box
别一个一个元素去加，工程上只认这一行初始化写法：
*,
*::before,
*::after {
box-sizing: border-box;
}
必须带上 *::before 和 *::after，否则伪元素（比如用 ::after 做清除浮动或装饰）会悄悄回归 content-box，导致尺寸意外变大。
立即学习“前端免费学习笔记（深入）”；
- 兼容性无压力：
box-sizingIE8+ 全支持，现代项目可放心用 - 性能影响可忽略：这是 CSS 解析时的静态计算方式切换，不触发布局重排
- 极少数例外：旧版 Safari 对
input[type="search"]渲染异常，可单独覆盖：input[type="search"] { box-sizing: content-box; }
调试时怎么看 box-sizing 到底起没起作用
很多人写了却觉得“没效果”，往往是因为只看了 Styles 面板里的声明，没看 Computed 面板的实际计算结果。
正确验证方式：
- 打开浏览器开发者工具 → Elements → 选中元素 → 切到 Computed 标签页
- 搜索
box-sizing，确认值是border-box - 再看
width和height的实际像素值，是否已包含 padding 和 border（例如设了width: 200px; padding: 10px; border: 2px，Computed 中width应显示200px，而非224px） - 注意：margin 始终在盒子外部，和
box-sizing无关，别拿它当判断依据
border-box 不是万能的，这些地方它“管不了”
box-sizing 只决定单个元素的尺寸计算逻辑，它不改变布局上下文对尺寸的最终控制权。
- Flex 容器中，子项设了
flex: 1，它的宽度由 flex-basis 决定，width声明可能被忽略——此时box-sizing仍生效，但你看到的“宽度”不是由width控制的 - Grid 项用了
grid-column: span 3，列宽由网格轨道定义，width同样不主导尺寸 - 所有主流 UI 库（Bootstrap、Tailwind、Ant Design）都默认启用
border-box，这不是“推荐”，而是事实标准——你在用它们时，早已在享受它的好处
真正容易被忽略的，是伪元素没被覆盖，以及 Computed 面板里看错值。这两处一错，就等于白配。
