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

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《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 包含了内容、内边距和边框。

也就是说：

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

同样例子：

为什么推荐使用 border-box？

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

通用重置写法：

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

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

本篇关于《content-box与border-box区别全解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！