content-box与border-box区别全解析

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《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 包含。选对了，布局更可控。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~