box-sizing: border-box 能解决边框撑破容器问题，因其使 width/height 包含 content、padding 和 border；默认 content-box 仅限内容区，加 padding/border 后总宽超预期。
直接用 box-sizing: border-box 就能解决——不是“可以试试”，而是现代项目里几乎必须加的兜底规则。
为什么 width 会“被撑开”？标准盒模型的真实行为
标准盒模型（box-sizing: content-box）下，width 和 height 只管内容区域。一旦加了 padding 或 border，浏览器会把它们额外“加”到你写的宽高上，导致实际占位超出预期。
比如：width: 200px; padding: 10px; border: 2px solid #000;，真实总宽度是 200 + 10×2 + 2×2 = 224px。这不是 bug，是规范定义的行为。
常见翻车场景：
- Grid 或 Flex 容器里子项设了固定
width: 100%，结果因 padding/border 溢出父容器 - 表单控件（如
input、textarea）加了padding后横向滚动或换行 - 响应式断点下，
calc(50% - 10px)配合 padding 后布局错位
box-sizing: border-box 是怎么“压缩内容”的？
border-box 不改变你写的 width 值，而是让这个值成为“边框盒总宽”。所有 padding 和 border 都从这个宽度里扣除，内容区自动收缩。
同样例子：width: 200px; padding: 10px; border: 2px solid #000;，内容区宽度变成 200 - 10×2 - 2×2 = 176px，但整个元素仍严格占满 200px。
关键点：
-
margin始终不参与盒模型计算，它永远在盒子外部，两种模式下行为一致 -
box-sizing是可继承属性，但只对块级/替换元素（如input、img）生效，inline元素无效 -
border-box对min-width/max-width同样适用：这些限制也作用于“边框盒总宽”
全局设置还是局部覆盖？推荐方案和兼容性注意
绝大多数现代项目应全局启用 border-box，避免逐个写死。最稳妥写法是：
*, *::before, *::after {
box-sizing: border-box;
}
这样连伪元素、重置样式都一并覆盖。但要注意：
- IE8+ 支持
box-sizing，无需前缀；但旧版 Safari（-webkit-box-sizing，现在基本可忽略 - 某些第三方 UI 库（如早期 Bootstrap 3）已内置类似重置，重复设置可能干扰其内部计算
- 不要在
html或body上直接设box-sizing，它不会继承给所有后代——必须用通配符或显式继承链
哪些情况不能靠 box-sizing 解决？容易忽略的边界
box-sizing 只管 width/height 与 padding/border 的关系，它不处理：
-
font-size或行高变化引起的高度浮动（内容撑高仍会发生） - 绝对定位元素的
top/right等偏移量，不受box-sizing影响 - 使用
transform: scale()后，视觉尺寸变了但盒模型计算仍按原始值 - 表格单元格（
td、th）默认为border-box行为，但受table-layout: auto干扰，此时设border-box无效
真正要警惕的是：当多个嵌套元素都设了 padding 和 border，又没统一 box-sizing，审查元素时看到的“计算宽度”会层层叠加，排查成本远高于一开始就全局锁定 border-box。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
