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-left + padding-right + border-left + border-right
- 实际占用的高度 = height + padding-top + padding-bottom + border-top + border-bottom
例如：一个元素设置为 width: 200px; padding: 10px; border: 5px solid black;，那么它实际占据的宽度是：
200 + 10 + 10 + 5 + 5 = 230px
border-box
当使用 box-sizing: border-box; 时，设置的 width 和 height 包含了内容、内边距和边框。
立即学习“前端免费学习笔记（深入）”；
也就是说：
- 你设置的 width 已经包含了 padding 和 border
- 内容区域会自动压缩，以腾出空间给 padding 和 border
同样上面的例子，如果设置 width: 200px; padding: 10px; border: 5px solid black; box-sizing: border-box;，那么整个元素从外到内的总宽度就是 200px，其中内容区域只有 180px 宽（200 - 10 - 10 - 5 - 5）。
实际应用中的建议
很多开发者喜欢在项目开始时统一设置：
* {
box-sizing: border-box;
}这样可以让布局更直观——设置多少宽，就占多少空间，不容易因为加 padding 或 border 导致超出容器。
特别是在栅格布局、按钮、卡片等需要精确控制尺寸的场景下，border-box 更容易管理。
基本上就这些。区别看似小，但在复杂布局中影响很大。理解清楚能避免很多“为什么超出了”的问题。
