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 包含了内容、内边距和边框。
立即学习“前端免费学习笔记（深入）”；
也就是说：
九歌
九歌–人工智能诗歌写作系统
322 查看详情 你设置的 width 已经包含了 padding 和 border内容区域会自动压缩，以腾出空间给 padding 和 border
同样上面的例子，如果设置 width: 200px; padding: 10px; border: 5px solid black; box-sizing: border-box;，那么整个元素从外到内的总宽度就是 200px，其中内容区域只有 180px 宽（200 – 10 – 10 – 5 – 5）。
实际应用中的建议
很多开发者喜欢在项目开始时统一设置：
* { box-sizing: border-box;}
这样可以让布局更直观——设置多少宽，就占多少空间，不容易因为加 padding 或 border 导致超出容器。
特别是在栅格布局、按钮、卡片等需要精确控制尺寸的场景下，border-box 更容易管理。
基本上就这些。区别看似小，但在复杂布局中影响很大。理解清楚能避免很多“为什么超出了”的问题。
以上就是css content-box与border-box有什么区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1039258.html
微信扫一扫 
支付宝扫一扫 
