content-box与border-box区别详解

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《CSS中content-box与border-box区别详解》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

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

到这里，我们也就讲完了《content-box与border-box区别详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！