如何在CSS中区分content-box与border-box_box-sizing理解差异

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 包含了内容、内边距和边框。

例如：

Shrink.media

Shrink.media是当今市场上最快、最直观、最智能的图像文件缩减工具

123

查看详情

• 设置 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 包含。选对了，布局更可控。

以上就是如何在CSS中区分content-box与border-box_box-sizing理解差异的详细内容，更多请关注php中文网其它相关文章！