会，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，都在悄悄改写你的布局契约。
