CSS中box-sizing属性border-box和content-box的区别

content-box是box-sizing的默认值，设置元素的宽高仅指内容区域的大小，不包括padding和border，例如width:200px;height:100px;padding:10px;border:5px时，实际总宽为230px，因为padding和border会额外增加尺寸；而border-box将padding和border包含在设定的宽高中，如设置width:200px后，整个盒子总宽即为200px，内容区自动压缩为170px，推荐使用border-box因其便于精确布局；选择方式上建议全局统一使用border-box以减少计算负担，但某些场景如需精确控制内容区或依赖默认行为时可保留content-box；常见误区是使用width:100%时若未配合border-box会导致溢出父容器，解决方法是添加box-sizing:border-box。

在CSS中，box-sizing 属性用来控制元素的宽度和高度如何计算。最常见的两个值是 border-box 和 content-box，它们的区别主要在于是否将边框（border）和内边距（padding）计入元素的总宽高。

什么是 content-box？

这是 box-sizing 的默认值。
当你设置一个元素的 width: 200px; height: 100px; padding: 10px; border: 5px solid black;，它的实际显示尺寸会比你设定的大一圈：

• 内容区域宽：200px
• 加上左右 padding 各10px → 总宽变为 200 + 20 = 220px
• 加上左右 border 各5px → 总宽变成 220 + 10 = 230px

也就是说，你设的是内容区大小，其他部分是额外加出来的。

这种模式在早期网页布局中比较常见，但随着响应式设计的发展，它在做精确布局时容易出问题。

立即学习“前端免费学习笔记（深入）”；

什么是 border-box？为什么推荐使用它？

设置为 box-sizing: border-box; 后，元素的宽高就包括了内容、padding 和 border：

• 设置 width: 200px; 那么整个盒子（包括边框和内边距）就是 200px 宽
• 实际内容区会自动压缩：200px 减去 padding 和 border 的宽度

举个例子：

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

这个元素的总宽度就是 200px，内部的内容区会被压缩成 200 - 102 -52 = 170px。

这在现代前端开发中非常实用，尤其是做栅格系统或者响应式布局的时候，能避免很多“算错了”的尴尬。

如何选择用哪个？

通常建议直接统一使用 border-box，可以减少布局时的计算负担。你可以这样全局设置：

* {
  box-sizing: border-box;
}

不过也有几种情况适合保留 content-box：

• 需要对内容区域进行精确控制（比如画布或特定图形）
• 使用 或某些旧版组件样式依赖默认行为
  想让子元素撑开父容器时更灵活一些

  ---

  常见误区提醒

  有时候开发者以为设置了 width: 100% 就一定能填满父容器，但如果用了 padding 又没用 border-box，就会溢出。例如：

  • 父容器宽 300px
  • 子元素设置 width: 100%; padding: 10px;
  • 实际子元素宽变成 300 + 20 = 320px，超出了父级

  这种情况只要加上 box-sizing: border-box; 就解决了。

  ---

  基本上就这些。虽然看起来是个小属性，但在布局细节上影响挺大，理解清楚能省不少调试时间。

以上就是CSS中box-sizing属性border-box和content-box的区别的详细内容，更多请关注php中文网其它相关文章！