content-box 的 width 和 height 仅包含内容，不包括 padding 和 border，实际尺寸会更大；2. border-box 的 width 和 height 包含内容、padding 和 border，设置值即总尺寸；3. 推荐使用 border-box 以便更直观控制布局，避免元素溢出，常用重置写法为 , ::before, *::after { box-sizing: 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
例如：
立即学习“前端免费学习笔记（深入）”；
box-sizing: content-box;width: 200px;
padding: 10px;
border: 5px solid black;
实际宽度 = 200 + 10×2 + 5×2 = 230px
border-box（更直观的计算方式）
当使用 box-sizing: border-box; 时，设置的 width 和 height 包含了内容、内边距和边框。
也就是说：
- 你设置的 width 就是元素最终的总宽度（内容区会自动压缩）
- padding 和 border 不再额外增加元素尺寸
同样例子：
box-sizing: border-box;width: 200px;
padding: 10px;
border: 5px solid black;
实际宽度 = 200px（不会变）
内容区宽度 = 200 - 20 - 10 = 170px
为什么推荐使用 border-box？
很多开发者和框架（如Bootstrap）默认将所有元素设为 border-box，因为这样更容易控制布局，尤其是在响应式设计中。
通用重置写法：
*, *::before, *::after {box-sizing: border-box;
}
这样可以避免因 padding 或 border 导致元素“撑出”预期尺寸的问题。
基本上就这些，掌握这个区别能减少很多布局中的意外情况。
