box-sizing属性决定CSS盒模型的宽高计算方式。1. content-box为默认模型，width和height仅含内容区域，总宽度=width+padding+border+margin；2. border-box下，width和height包含内容、padding和border，总宽度=width+margin，内容区自动压缩；推荐全局设置*{box-sizing:border-box}以提升布局可控性与一致性。
在CSS中，盒模型的宽高计算方式取决于
box-sizing
属性的设置。默认情况下，元素使用
content-box
，但可以通过设置
border-box
来改变宽高的计算逻辑。
1. content-box（标准盒模型）
这是默认的盒模型。此时，元素的
width
和
height
仅指内容区域的大小，不包括内边距、边框和外边距。
总占用宽度计算公式为：
总宽度 = width + 左右padding + 左右边框宽度 + 左右margin总高度 = height + 上下padding + 上下边框宽度 + 上下margin例如：
div { width: 200px; padding: 10px; border: 5px solid black; margin: 20px;}
该div实际占用的宽度为：
200 + (10+10) + (5+5) + (20+20) = 270px
2. border-box（IE盒模型）
当
box-sizing: border-box
时，设置的
width
和
height
包含了内容、内边距和边框，但不包括外边距。
此时的计算方式为：
Seede AI
AI 驱动的设计工具
586 查看详情
立即学习“前端免费学习笔记（深入）”；
width 已包含 padding 和 border内容实际可显示区域会自动压缩总占用宽度 = width + 左右margin总高度 = height + 上下margin例如：
div { box-sizing: border-box; width: 200px; padding: 10px; border: 5px solid black; margin: 20px;}
该div的内容区宽度为：
200 – (10+10) – (5+5) = 170px，但整体占用宽度是 200 + 40 = 240px
3. 如何选择合适的盒模型
推荐在项目开始时统一设置：
* { box-sizing: border-box;}
这样可以更直观地控制布局，避免因padding或border导致超出预期尺寸。使用
border-box
时，设定的宽高就是视觉上的尺寸响应式设计中更容易计算和对齐减少意外溢出容器的问题
基本上就这些。理解
box-sizing
的影响，能有效避免布局错乱。
以上就是css盒模型宽高计算方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1065379.html
微信扫一扫 
支付宝扫一扫 
