content-box的width不包含padding和border，实际宽度为内容+内边距+边框；2. border-box的width包含三者，内容区自动压缩；3. 推荐全局设置box-sizing: border-box，使布局更直观可控，减少计算错误。
在CSS中，border-box和content-box是box-sizing属性的两个主要值，它们决定了元素的宽度和高度如何计算。理解它们的区别对布局控制非常重要。
content-box（默认模式）
当box-sizing设置为content-box时，元素的width和height只包含内容区域，不包括padding和border。
这意味着如果你设置一个元素：
width: 200px;
padding: 20px;
border: 5px solid black;
那么它实际占用的总宽度是：
立即学习“前端免费学习笔记（深入）”；
内容宽度：200px左右内边距：20px × 2 = 40px左右边框：5px × 2 = 10px总宽度 = 200 + 40 + 10 = 250px
这容易导致布局超出预期尺寸，尤其在响应式设计中容易出问题。
border-box（更直观的模式）
当box-sizing设置为border-box时，元素的width和height包含了内容、padding和border。
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情
同样设置：
width: 200px;
padding: 20px;
border: 5px solid black;
此时总宽度仍然是200px，浏览器会自动压缩内容区域来适应：
总宽固定为200px左右padding占40px左右border占10px内容区域实际宽度 = 200 – 40 – 10 = 150px
这种方式更符合视觉上的“这个盒子就是200px宽”的直觉。
实际开发建议
大多数现代项目推荐全局设置：
* { box-sizing: border-box; }
这样所有元素都采用border-box模型，避免意外的宽度溢出，让布局更可控，尤其是在使用百分比宽度或弹性布局时。
基本上就这些，区别关键在于“width到底包不包含padding和border”。选border-box能减少计算负担，提升开发效率。
以上就是css border-box计算方式与content-box区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1015801.html
微信扫一扫 
支付宝扫一扫 
