box-sizing 不是盒模型本身，而是控制尺寸计算方式的开关；默认 content-box 模式下 width 仅指内容区，padding 和 border 额外增加导致实际宽度超预期，而 border-box 模式使 width 包含 padding 和 border，确保尺寸可控且一致。
直接说结论：box-sizing 不是盒模型本身，而是控制盒模型“怎么算尺寸”的开关；真正决定元素占位大小的，是 content-box 和 border-box 这两种计算逻辑，而默认行为（content-box）恰恰最容易导致布局错位。
为什么设置 width: 200px 的 div 实际宽了 230px？
因为浏览器默认用的是 content-box 模式：你写的 width: 200px 只管内容区，padding 和 border 是额外加在它外面的。比如加了 padding: 10px 和 border: 5px，实际宽度就是 200 + 10×2 + 5×2 = 230px。
这种“写 200 却占 230”的现象，在响应式布局里尤其致命——百分比宽度会因 padding/border 溢出容器，flex 或 grid 子项也会错排。
- 常见错误现象：
width: 100%的子元素撑破父容器、input 和 div 并排时高度/宽度不齐 - 根本原因：不同元素（如
inputvsdiv）默认padding和border不同，但都走content-box，结果实际尺寸全乱 - 不要手动去减算：别写
width: calc(200px - 20px - 10px)，这不可维护，也挡不住浏览器默认样式干扰
box-sizing: border-box 是怎么“把尺寸锁死”的？
border-box 把 width 和 height 当成“最外层盒子的总尺寸”，内容区自动收缩来腾出空间给 padding 和 border。还是上面的例子：width: 200px; padding: 10px; border: 5px → 实际宽度严格等于 200px，内容区只剩 170px 宽。
这意味着你改 padding 或 border，只要不超 width，元素总宽就不变——这对组件化开发和响应式断点切换特别友好。
- 必须全局设置才有效：
* { box-sizing: border-box; }，否则只设个别元素，反而加剧不一致 - IE8+ 支持原生
box-sizing，但旧版需前缀：-webkit-box-sizing（Safari/Chrome）、-moz-box-sizing（Firefox），-ms-box-sizing（IE8） - 注意：
margin始终不参与box-sizing计算，它永远是“盒子外面”的距离
哪些元素必须显式重置 box-sizing？
表单控件是重灾区：input、textarea、select、button 在各浏览器中自带不统一的 padding 和 border，且部分浏览器（如旧版 Safari）对它们的 box-sizing 默认值可能和普通元素不同。
哪怕你写了全局 * { box-sizing: border-box; }，也建议再补一句：
input,
textarea,
select,
button {
box-sizing: border-box;
}
- 原因：某些浏览器对表单元素应用 UA 样式时，会覆盖通配符规则（尤其在未声明
!important时） - 更稳妥做法：在 CSS 重置层（如 normalize.css 或 reset.css）之后立即定义，确保优先级足够
- 别依赖
inherit：表单元素的父元素若没显式设box-sizing，继承来的可能是content-box
真正容易被忽略的，不是“要不要用 border-box”，而是“用了之后是否所有元素都真正生效”——特别是那些浏览器悄悄加了默认样式的元素，它们才是让布局突然偏移的隐形推手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
