CSS盒模型：content-box与border-box区别详解

golang学习网今天将给大家带来《CSS content-box 和 border-box 是盒模型的两种不同计算方式，它们的主要区别在于如何计算元素的总宽度和高度。以下是详细对比：1. content-box（默认）定义：width 和 height 属性仅包括内容区域的大小，不包含内边距（padding）、边框（border）和外边距（margin）。计算公式：元素总宽度 = width + padding-left + padding-right + border-left + border-right 元素总高度 = height + padding-top + padding-bottom + border-top + border-bottom特点：如果你设置一个元素的 width: 200px;，那么这个 200px 只是内容区域的宽度。内边距和边框会增加元素的实际占用空间。在布局中容易出现尺寸错位的问题，尤其是当使用固定宽度时。2. border-box定义：width 和 height 属性包括内容、内边距和边框的总和，但不包括外边距。计算公式：元素总宽度 = width （包含内容 + padding + border） 元素总高度 = height （包含内容 + padding + border）**特点》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

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-left + padding-right + border-left + border-right
• 实际占用的高度 = height + padding-top + padding-bottom + border-top + border-bottom

例如：一个元素设置为 width: 200px; padding: 10px; border: 5px solid black;，那么它实际占据的宽度是：
200 + 10 + 10 + 5 + 5 = 230px

border-box

当使用 box-sizing: border-box; 时，设置的 width 和 height 包含了内容、内边距和边框。

也就是说：

• 你设置的 width 已经包含了 padding 和 border
• 内容区域会自动压缩，以腾出空间给 padding 和 border

同样上面的例子，如果设置 width: 200px; padding: 10px; border: 5px solid black; box-sizing: border-box;，那么整个元素从外到内的总宽度就是 200px，其中内容区域只有 180px 宽（200 - 10 - 10 - 5 - 5）。

实际应用中的建议

很多开发者喜欢在项目开始时统一设置：

* {
  box-sizing: border-box;
}

这样可以让布局更直观——设置多少宽，就占多少空间，不容易因为加 padding 或 border 导致超出容器。

特别是在栅格布局、按钮、卡片等需要精确控制尺寸的场景下，border-box 更容易管理。

基本上就这些。区别看似小，但在复杂布局中影响很大。理解清楚能避免很多“为什么超出了”的问题。

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