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
例如：
立即学习“前端免费学习笔记（深入）”；
box-sizing: content-box;
width: 200px;
padding: 10px;
border: 5px solid black;
实际宽度 = 200 + 10×2 + 5×2 = 230px
border-box（更直观的计算方式）
当使用 box-sizing: border-box; 时，设置的 width 和 height 包含了内容、内边距和边框。
也就是说：
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情 你设置的 width 就是元素最终的总宽度（内容区会自动压缩）padding 和 border 不再额外增加元素尺寸
同样例子：
box-sizing: border-box;
width: 200px;
padding: 10px;
border: 5px solid black;
实际宽度 = 200px（不会变）
内容区宽度 = 200 – 20 – 10 = 170px
为什么推荐使用 border-box？
很多开发者和框架（如Bootstrap）默认将所有元素设为 border-box，因为这样更容易控制布局，尤其是在响应式设计中。
通用重置写法：
*, *::before, *::after {
box-sizing: border-box;
}
这样可以避免因 padding 或 border 导致元素“撑出”预期尺寸的问题。
基本上就这些，掌握这个区别能减少很多布局中的意外情况。
以上就是css内容区content-box和border-box区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1052705.html
微信扫一扫 
支付宝扫一扫 
