content-box下width仅含内容区，border-box下width包含内容、内边距和边框；默认content-box因W3C标准而设，但border-box更利于布局可控，推荐全局重置为border-box，margin始终不参与计算。
content-box 和 border-box 的尺寸计算逻辑完全不同
核心区别就一句话：content-box 下你写的 width 只管内容区，border-box 下你写的 width 管到边框最外沿。这直接决定盒子“实际占多大地方”。
比如设 width: 200px; padding: 15px; border: 2px solid #ccc;：
-
content-box（默认）：内容区宽 200px，总宽度 = 200 + 15×2 + 2×2 = 234px -
border-box：内容区自动压缩为 200 − 15×2 − 2×2 = 166px，总宽度严格等于 200px
为什么默认用 content-box 却推荐全局切 border-box
W3C 标准定义的 content-box 更“理论正确”，但现实中它让布局变得不可预测——加个 padding 就撑开容器，改个 border 就破坏栅格对齐，响应式里尤其头疼。
现代项目几乎都用以下重置（放在 CSS 入口或 reset 中）：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after {
box-sizing: border-box;
}这样所有元素统一按“我设多少宽，就真占多少宽”来理解，省去反复心算 padding 和 border 的麻烦。
border-box 不是万能解药：margin 依然游离在外
很多人误以为 border-box 把 margin 也包进去了，其实不是：margin 永远不参与 box-sizing 计算，它始终是“盒子之外”的空间。
所以即使用了 border-box，下面这段代码仍会让容器溢出：
.card {
width: 300px;
box-sizing: border-box;
margin: 20px;
}
/* 实际占用水平空间 = 300px + 20px×2 = 340px */要控制整体占位，必须单独管理 margin，不能指望 box-sizing 替你兜底。
兼容性与特殊场景下的取舍
box-sizing: border-box 自 IE8+ 全面支持，移动端无顾虑；但老项目若大量依赖 content-box 的原始行为（比如 JS 动态读取 offsetWidth 并做计算），强行切换可能引发视觉偏移或脚本错判。
稳妥做法：
- 新项目：全局启用
border-box，从头建立一致预期 - 老项目改造：优先在局部组件（如表单控件、卡片模块）中显式声明
box-sizing: border-box - 需要精确测量内容区时（比如 Canvas 绘图区域适配）：保留
content-box或用 JS 显式减去getComputedStyle获取的 padding/border 值
真正容易被忽略的，是那些没写 box-sizing 却又混用第三方 UI 库的页面——库内用 border-box，你自己写的元素用默认 content-box，结果同级元素高度/宽度对不齐，查半天才发现是盒模型不统一。
