content-box的宽高仅含内容，实际尺寸需加上padding和border；border-box的宽高包含内容、padding和border，推荐全局设置为border-box以避免布局错位。
在CSS中，content-box 和 border-box 是 box-sizing 属性的两个常用值，它们决定了元素的宽度和高度如何计算。理解它们的区别对精准控制布局非常关键。
content-box（默认行为）
当一个元素使用 box-sizing: content-box; 时，设置的 width 和 height 只包含内容区域，不包括 padding 和 border。
这意味着：
- 实际占用的宽度 = width + 左右padding + 左右border
- 实际占用的高度 = height + 上下padding + 上下border
例如：
立即学习“前端免费学习笔记（深入）”；
.box {width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
}
这个元素实际宽度为：200 + 40 (padding) + 10 (border) = 250px。
border-box（更直观的计算方式）
当设置 box-sizing: border-box; 后，元素的 width 和 height 包含了内容、padding 和 border。
也就是说：
- 你设置的 width 就是元素最终的总宽度
- 内容区会自动压缩来腾出空间给 padding 和 border
同样的例子：
.box {width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}
此时元素总宽度仍是 200px，内容区宽度变为：200 - 40 (padding) - 10 (border) = 150px。
如何选择与推荐用法
大多数现代项目推荐将所有元素默认设为 border-box，这样更容易进行响应式布局和栅格系统设计。
通用重置写法：
*, *::before, *::after {box-sizing: border-box;
}
这样可以统一所有元素的盒模型行为，避免意外的溢出或错位。
基本上就这些。掌握这两种盒模型的区别，能让你在布局时少踩很多坑。特别是当你发现元素比预期宽或出现横向滚动条时，很可能就是 box-sizing 在起作用。
