元素总宽高由盒模型决定，包括content、padding、border、margin；标准模型（content-box）下总宽=width+padding+border+margin，替代模型（border-box）下width包含content、padding和border，更利于布局控制。
在CSS中，元素的总宽度和高度并不是简单等于设置的width和height，而是由CSS盒模型决定的。盒模型包括四个部分：内容（content）、内边距（padding）、边框（border）和外边距（margin）。其中影响元素占据空间宽高的主要是前三个。
盒模型组成结构
一个元素的实际占用空间计算如下：
内容区（content）：设置的 width / height内边距（padding）：内容到边框的距离，四边可分别设置边框（border）：围绕内容和内边距的边线外边距（margin）：元素与其他元素之间的间距，不计入元素自身宽高
标准盒模型下的宽度计算公式
在默认的标准盒模型（box-sizing: content-box）下，元素的总宽度为：
总宽度 = width + 左右padding + 左右border + 左右margin
总高度 = height + 上下padding + 上下border + 上下margin
示例：
假设一个div设置如下：
div { width: 200px; height: 100px; padding: 10px; border: 5px solid #000; margin: 20px;}
那么它的实际占用空间为：
立即学习“前端免费学习笔记（深入）”；
瞬映
AI 快速创作数字人视频，一站式视频创作平台，让视频创作更简单。
57 查看详情 
总宽度 = 200 + (10×2) + (5×2) + (20×2) = 200 + 20 + 10 + 40 = 270px总高度 = 100 + (10×2) + (5×2) + (20×2) = 100 + 20 + 10 + 40 = 170px
替代盒模型：box-sizing: border-box
使用box-sizing: border-box可以改变盒模型行为，此时设置的width和height包含了内容、padding 和 border。
总宽度 = 设置的 width + 左右margin
总高度 = 设置的 height + 上下margin
示例：
同样的样式，但加上box-sizing: border-box：
div { box-sizing: border-box; width: 200px; height: 100px; padding: 10px; border: 5px solid #000; margin: 20px;}
此时：
内容区宽度 = 200 – (10×2) – (5×2) = 170px总宽度 = 200 + (20×2) = 240px（比标准模型小）总高度 = 100 + (20×2) = 140px
这种模式更符合直觉，常用于布局，避免因加padding或border导致超出容器。
基本上就这些。理解盒模型是掌握页面布局的基础，关键是分清content-box和border-box的区别，并合理使用box-sizing控制计算方式。
以上就是CSS盒模型如何计算元素的总宽度_盒子宽高公式示例讲解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/991263.html
微信扫一扫 
支付宝扫一扫 
