content-box 的 width 和 height 仅包含内容，不包括 padding 和 border，导致总尺寸易超出预期；2. border-box 的 width 和 height 包含内容、padding 和 border，整体尺寸更可控；3. 现代开发推荐全局设置 box-sizing: border-box，确保布局一致性。
在CSS中，content-box 和 border-box 是 box-sizing 属性的两个主要值，它们决定了元素的宽度和高度如何计算。理解它们的差异对精确控制布局至关重要。
content-box：默认的盒模型
当 box-sizing: content-box 时，元素的 width 和 height 只包含内容区域，不包括内边距（padding）和边框（border）。
这意味着：
- 设置 width: 200px; padding: 20px; border: 5px solid;
- 实际占用的总宽度 = 200 + 20×2 + 5×2 = 250px
容易导致布局超出预期，尤其是在响应式设计中。
立即学习“前端免费学习笔记（深入）”；
border-box：更直观的盒模型
当 box-sizing: border-box 时，元素的 width 和 height 包含了内容、内边距和边框。
例如：
- 设置 width: 200px; padding: 20px; border: 5px solid;
- 内容区会自动压缩为 150px（200 - 40 - 10），确保整体宽度仍为200px
这种模式更符合视觉上的“我想要一个200px宽的盒子”的直觉。
如何选择与应用
多数现代项目推荐全局使用 border-box，避免布局错位。
常用重置方式：
*, *::before, *::after {
box-sizing: border-box;
}
这样所有元素都采用 border-box 模型，便于统一控制尺寸。
基本上就这些。关键在于明白 width 到底“包不包含” padding 和 border —— content-box 不包含，border-box 包含。选对了，布局更可控。
