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 值，而不是直接信样式声明。
