box-sizing 是控制 width/height 计算范围的属性，默认 content-box（仅内容），推荐全局设为 border-box（内容+内边距+边框），确保所见即所得；需包含伪元素，margin 不受其影响。
box-sizing 是控制 width/height “算谁的宽度” 的开关
它不改变元素外观，只改你写的 width: 200px 到底指哪一段：是纯内容（content-box），还是内容+内边距+边框（border-box）。浏览器默认用前者，但几乎所有现代项目都立刻切到后者——因为不切，布局就容易“悄悄变宽”，尤其在 flex/grid 或百分比宽度下。
为什么必须全局设成 border-box？
不设的话，哪怕两个元素都写 width: 50%，只要其中一个有 padding: 10px 或 border: 1px，它就会撑出父容器（总宽 > 100%），导致换行、错位或横向滚动条。而 border-box 让你写的宽度就是它最终占的宽度，所见即所得。
- 推荐写法（覆盖所有元素和伪元素）：
*, *::before, *::after { box-sizing: border-box; } - 别只写
* { box-sizing: border-box; }——漏掉伪元素（比如::before常用于图标、装饰）会导致它们仍按content-box计算，引发意外溢出 - IE8 需加前缀：
-ms-box-sizing: border-box;，但当前已极少需兼容
content-box 和 border-box 的实际尺寸差异
看这个对比最直观：
.cbox {
box-sizing: content-box;
width: 200px;
padding: 15px;
border: 3px solid #333;
}
.bbox {
box-sizing: border-box;
width: 200px;
padding: 15px;
border: 3px solid #333;
}-
.cbox实际总宽 =200 + 15×2 + 3×2 = 236px -
.bbox实际总宽 =200px（内容区自动压缩为200 − 30 − 6 = 164px） - 两者背景、边框、内边距视觉效果完全一样，但盒模型“归属权”不同
容易被忽略的坑：margin 不受 box-sizing 影响
box-sizing 只管 width/height 怎么算，margin 始终在盒子外部，永远额外加。所以即使用了 border-box，如果父容器没留够 margin 空间，照样会挤出边界或重叠。
立即学习“前端免费学习笔记（深入）”；
- 常见误判：“我用了 border-box，怎么还溢出了？” → 八成是忘了 margin 或父容器
padding不足 - 调试建议：用浏览器开发者工具选中元素，看右侧“Computed”面板里的
width和margin分开显示，确认哪部分真正占空间
实际开发中，box-sizing: border-box 是布局的地基——不是“可选项”，而是“不设就大概率出问题”的硬性前提。真正复杂的地方不在属性本身，而在它和 flex、grid、百分比、缩放（transform: scale）等特性叠加时的隐式交互，这些才是需要现场调试的点。
