标准盒模型下，元素总宽度为width+padding+border+margin；设置box-sizing: border-box后，width包含padding和border，padding不再增加总宽度。
在CSS盒模型中，元素的总宽度由 width、padding、border 和 margin 共同决定。你问的是 width 与 padding 如何计算，重点在于理解盒模型的类型。
标准盒模型（content-box）
默认情况下，CSS 使用的是标准盒模型。
在这种模型下：
立即学习“前端免费学习笔记（深入）”；
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情 width 指的是内容区域（content）的宽度padding 是额外加在内容区域外的内边距总占用宽度 = width + padding-left + padding-right + border-left + border-right
例如：
.box { width: 200px; padding: 10px; border: 5px solid #000;}
这个元素在页面中实际占据的宽度是：
200（width） + 10（左内边距） + 10（右内边距） + 5（左边框） + 5（右边框） = 230px
IE盒模型（border-box）
通过设置 box-sizing: border-box 可以切换到这种模型。
在这种模型下：
立即学习“前端免费学习笔记（深入）”；
width 包含了 content + padding + border你设置的 width 就是元素最终在页面上占据的总宽度（不含 margin）padding 和 border 会向内“压缩”内容区域
同样的例子，但加上 box-sizing:
.box { width: 200px; padding: 10px; border: 5px solid #000; box-sizing: border-box;}
此时元素总宽度就是 200px，内容区域会被压缩为：200 – 10 – 10 – 5 – 5 = 170px
如何选择？
现代开发中，很多开发者喜欢全局设置：
*, *::before, *::after { box-sizing: border-box;}
这样可以让 width 更直观——你设成 200px，它就在页面上占 200px，不用担心 padding 把布局撑开。
基本上就这些。关键记住：默认情况下 padding 会增加总宽度，除非用了 box-sizing: border-box。
以上就是css盒模型width与padding如何计算的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1000585.html
微信扫一扫 
支付宝扫一扫 
