css content-box与border-box有什么区别

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

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

也就是说：

Narration Box

Narration Box是一种语音生成服务，用户可以创建画外音、旁白、有声读物、音频页面、播客等

27

查看详情

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

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

实际应用中的建议

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

<font face="Courier New">* {
  box-sizing: border-box;
}</font>

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

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

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

以上就是css content-box与border-box有什么区别的详细内容，更多请关注php中文网其它相关文章！