会，padding 和 border 会让元素变宽，但仅在 box-sizing: content-box 下；设 width: 200px、padding: 15px、border: 2px 时总宽为 234px，侵占父容器空间。

padding 和 border 会让元素“变宽”吗？

会，但只在默认盒模型（box-sizing: content-box）下——这是浏览器的原始行为。你设 width: 200px，再加 padding: 15px 和 border: 2px，实际总宽度就变成 200 + 15×2 + 2×2 = 234px。这个“多出来的宽度”不是错觉，它真实侵占父容器空间，常导致横向溢出、Flex 项换行、Grid 栅格错位。

为什么 box-sizing: border-box 是必选项

它把 width 定义为“最终可见宽度”，即内容区 + padding + border 的总和。设置后，padding 和 border 不再撑大盒子，而是向内压缩内容区域。这对布局控制极其关键：

• 响应式断点中，width: 100% 真正代表“占满父容器”，不会因 padding/border 超出
• 栅格系统（如 Bootstrap、自定义 Grid）能按预期均分宽度，避免最后一列掉行
• 表单控件（input、textarea）统一设置 width: 100% 时，边框和内边距不再破坏对齐

推荐全局启用：

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

padding 和 border 在不同盒模型下的计算差异

关键不是“要不要用它们”，而是“怎么算它们”。同一组值，在两种模型下结果截然不同：

• content-box（默认）：width = 内容区；总宽 = width + padding×2 + border-width×2
• border-box：width = 总宽；内容区宽 = width − padding×2 − border-width×2

例如：width: 300px; padding: 20px; border: 3px solid #333;

• content-box → 实际占宽：300 + 40 + 6 = 346px
• border-box → 实际占宽：仍为 300px，内容区只剩 234px

容易被忽略的兼容性与陷阱

即使用了 border-box，仍有几个现实坑点：

• box-sizing 不继承，必须显式设置或靠全局重置生效；仅给父元素设了没用
• 某些 UI 库（如早期 Ant Design）或第三方组件可能重置了 box-sizing，需检查 computed styles 确认
• 当使用 calc() 动态计算宽度时（如 width: calc(100% - 2rem)），若未配合 border-box，减去的值可能不足以抵消 padding/border 增量
• outline 不参与盒模型计算，不影响尺寸，但视觉上类似 border，易误判

真正要控制总宽度，box-sizing: border-box 不是可选项，而是起点——否则每次加 padding 或 border，都在悄悄改写你的布局契约。