width: 200px 渲染为 250px 是因默认 box-sizing: content-box，width 仅指内容区，padding 和 border 额外叠加；设为 border-box 后 width 表示总宽，内容区自动压缩。
因为你写的 width 默认只管内容区，padding 和 border 是额外加在它外面的——这不是 bug，是 CSS 规范定义的 box-sizing: content-box 行为。
为什么 width: 200px 渲染出来是 250px？
浏览器默认按 content-box 计算：你设的 width 和 height 仅指内容区域尺寸。所有 padding 和 border 都会叠加在它之外。
比如这个常见写法：
.card {<br> width: 200px;<br> padding: 20px;<br> border: 5px solid #ccc;<br>}
实际总宽度 = 200px（内容） + 20×2（左右 padding） + 5×2（左右 border） = 250px。
立即学习“前端免费学习笔记（深入）”；
这种叠加在嵌套结构里会层层放大，尤其当父容器刚好是 width: 200px 时，子元素直接溢出。
box-sizing: border-box 怎么“压住”实际宽度？
它把 width 的含义从“内容宽”改成“边框盒总宽”。你写 width: 200px，浏览器就真让它占满 200px，自动把内容区往里缩。
- 加了
padding: 20px和border: 5px，内容区就只剩 150px 宽 -
margin始终不参与盒模型计算，两种模式下都算在总尺寸外 -
min-width/max-width同样遵循border-box规则，别只改width忘了它们
为什么写了 box-sizing: border-box 还没用？
写了不等于生效。最常见失效原因：
- 第三方 UI 库（如旧版 Element UI）显式设了
box-sizing: content-box，优先级更高 - 没覆盖伪元素：
*::before, *::after默认仍是content-box，得一起重置 - Flex 子项默认
min-width: auto（img、input等替换元素也如此），即使box-sizing正确，也要配min-width: 0 - 表格（
table、td）默认无视box-sizing，必须显式声明
验证是否真生效：打开开发者工具 → 「Computed」面板查 box-sizing 值；再切到「Metrics」面板，拖动 padding 滑块看总宽度是否稳定不变。
全局设置 box-sizing: border-box 的安全写法
最稳妥的初始化方式是：
*,<br>*::before,<br>*::after {<br> box-sizing: border-box;<br>}
这条规则必须放在所有样式之前，否则会被后续高优先级规则覆盖。注意：
- 不要只写
html, body { box-sizing: border-box; }—— 它不继承，子元素还是默认content-box - iOS 12 及更早 Safari 对
input、textarea会回退为content-box，需单独加固：input, textarea, button { box-sizing: border-box; } -
width: auto或width: fit-content时，box-sizing不起作用——它只约束你显式写的width/height
真正麻烦的从来不是 padding 本身，而是它和 margin、flex、display 类型混在一起时，人脑没记住浏览器到底按哪条规则算的。
