如何在CSS中控制元素内容区_content-box与border-box区别

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 在起作用。