css 盒模型 box sizing 为什么推荐使用 border box_通过简化宽度计算提升可维护性

width: 100% 撑破父容器是因为 box-sizing: content-box 下 width 不包含 padding 和 border，导致实际宽度超限；全局设 * { box-sizing: border-box } 可修复，使 width 直接代表总尺寸。

为什么 width: 100% 会撑破父容器？

因为默认 box-sizing: content-box 下，width: 100% 只管内容区，一旦加了 padding: 12px 和 border: 1px，实际宽度就变成 100% + 24px + 2px，必然溢出。尤其在表单输入框、卡片栅格或 flex 子项中，这会导致横向滚动条、意外换行、右侧留白——不是代码写错了，是盒模型在“偷偷加法”。

一行代码就能全局修复布局预期

在 css 入口（如 reset.css 或 base.css）顶部加这一句：

* , *::before, *::after { box-sizing: border-box; }

它让所有元素（包括伪元素）的 width 和 height 直接代表最终渲染尺寸，padding 和 border 自动被“吃”进去。之后写 width: 300px 就真占 300px，写 width: 50% 并排两个也不会超 100%。

Flex/Grid 中 padding 不再干扰空间分配

在 display: flex 容器里，如果子项仍用 content-box，哪怕只设 flex: 1，它的 padding 也会额外占空间，导致等分不均、右侧出现隐藏滚动条。

立即学习“前端免费学习笔记（深入）”；

• box-sizing: border-box 后，flex-basis 或 grid-template-columns 的数值就是真实占用宽度，内边距不再“抢地盘”
• 三列 width: 33.333% + padding: 16px，不用再写 calc(33.333% - 32px)
• 组件封装时，调用方传 --card-width: 100%，内部加多少 padding 都不影响总宽

迁移时最常踩的坑：视觉尺寸突然变小

把老项目从 content-box 切到 border-box，如果原有样式是 width: 200px; padding: 10px;，切换后内容区会被压缩成 180px，看起来“缩了”。这不是 bug，是预期行为——但容易误判为样式崩了。

• 修复方法：同步放大 width，比如改为 width: 220px; padding: 10px;
• 第三方组件（如旧版 bootstrap 表单）可能依赖 content-box，可加白名单重置：.legacy-input input { box-sizing: content-box; }
• 注意：margin 不受 box-sizing 影响，溢出仍可能是 margin 没预留空间

真正难的不是写那一行 box-sizing: border-box，而是它和 transform: scale()、min-width、媒体查询里的 rem 计算叠加时，DevTools 显示的 width（内容区）和实际占位尺寸不一致——这时候得看“Computed”面板里的 border-box width 值，而不是直接信样式声明。