box-sizing决定width/height是内容区大小还是总占位尺寸：content-box下宽高仅含内容，padding/border额外增加；border-box下宽高为总尺寸，padding/border从中扣除。
直接说结论：box-sizing 决定你写的 width 和 height 到底算“内容区大小”还是“总占位尺寸”，它不改视觉效果，但彻底改变尺寸计算逻辑——布局错乱、换行、溢出、响应式断点失效，八成跟它有关。
content-box 是默认值，但它常让 width 失控
浏览器默认用 content-box：你写 width: 200px，只管内容区；padding: 10px 和 border: 2px 会额外加在两边，实际占宽变成 200 + 20 + 4 = 224px。这种“隐性膨胀”在以下场景立刻暴露：
- 两个
width: 50%的div并排却换行（加了 padding 后总宽 > 100%） -
input[type="text"]设了width: 100%却撑破父容器 - Flex 子项设了
flex-basis: 200px，但因 padding 导致空间分配偏差 - Grid 列定义为
grid-template-columns: 1fr 200px，结果 200px 列实际占 220px
border-box 让 width 变成“承诺值”，不是“起始值”
box-sizing: border-box 把 width 定义为“最终占据的总宽度”，padding 和 border 全部从这个宽度里扣减，内容区自动收缩。这不是妥协，是把控制权交还给你：
- 写
width: 200px，它就真占 200px，不管有没有padding或border - 和
calc()配合更自然：比如两栏等宽带边框，直接width: calc(50% - 1px)，不用再手动减去左右padding和border - Flex/Grid 中的
min-width、flex-basis、grid-column等尺寸声明，全部按“总宽”理解，空间分配更可预测
全局设置 * { box-sizing: border-box } 的真实代价
看似最省事，但会穿透到所有元素，包括伪元素和第三方组件内部：
立即学习“前端免费学习笔记（深入）”；
-
* { box-sizing: border-box; }漏掉::before/::after，它们仍走默认content-box，导致尺寸不一致 - 旧版 Bootstrap 表单控件、ECharts 的
canvas容器、某些textarea在 Safari 中高度异常，都是因为它们内部 JS 或 CSS 依赖content-box下的clientWidth或渲染逻辑 - 更稳妥的写法是：
html { box-sizing: border-box; }+*::before, *::after { box-sizing: inherit; } - 对已知不兼容的组件单独重置，例如：
.echarts-container canvas { box-sizing: content-box; }
DevTools 里 width 值和标尺显示不一致？这是正常现象
Chrome/Firefox 的“Computed”面板中，width 显示的是内容区宽度（即使元素是 border-box）；而 Layout 标签页的尺寸标注框、元素高亮轮廓，显示的是 border-box 总尺寸。这两个数值本就不该相等——你得看对地方，否则会误判问题出在 CSS 还是渲染上。
真正容易被忽略的是：当用 transition 动画 padding 或 border-width 时，border-box 下内容区会实时压缩/扩张，文字缩放、图标错位是必然结果，不是 bug，也很难“修好”——要么换用 transform: scale() 模拟，要么干脆别动这些属性。
