css内容区content-box和border-box区别

content-box 的 width 和 height 仅包含内容，不包括 padding 和 border，实际尺寸会更大；2. border-box 的 width 和 height 包含内容、padding 和 border，设置值即总尺寸；3. 推荐使用 border-box 以便更直观控制布局，避免元素溢出，常用重置写法为 , ::before, *::after { box-sizing: 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

例如：

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

border-box（更直观的计算方式）

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

也就是说：

Narration Box

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

27

查看详情

• 你设置的 width 就是元素最终的总宽度（内容区会自动压缩）
• padding 和 border 不再额外增加元素尺寸

同样例子：

为什么推荐使用 border-box？

很多开发者和框架（如Bootstrap）默认将所有元素设为 border-box，因为这样更容易控制布局，尤其是在响应式设计中。

通用重置写法：

这样可以避免因 padding 或 border 导致元素“撑出”预期尺寸的问题。

基本上就这些，掌握这个区别能减少很多布局中的意外情况。

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