元素实际宽高由content、padding、border组成，margin仅影响布局间距；默认box-sizing: content-box下，总宽度=width+左右padding+左右border+左右margin；设置box-sizing: border-box后，width已包含padding和border，更易控制尺寸，推荐全局使用。
CSS盒模型中，元素的实际宽高由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）共同组成。其中，实际占用的宽高主要取决于前三个部分，因为 margin 不影响元素自身的尺寸，只影响与其他元素的间距。
元素实际宽度的计算方式
在默认的盒模型（即 box-sizing: content-box）下，元素的总宽度计算如下：
总宽度 = width + 左右 padding + 左右 border + 左右 margin
注意：margin 不属于元素“自身”的尺寸，但在页面布局中会影响其占据的空间。
例如：
立即学习“前端免费学习笔记（深入）”；
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
此时元素的实际宽度（占据空间）为：
200 + 10×2 + 5×2 + 20×2 = 270px
Cowriter
AI 作家，帮助加速和激发你的创意写作
107 查看详情
使用 border-box 改变计算方式
当设置 box-sizing: border-box 时，width 和 height 包含了 content、padding 和 border，此时你设定的 width 就是元素最终的总宽度（不含 margin）。
总宽度 = 设定的 width（已包含 padding 和 border） 实际占据宽度 = width + 左右 margin
这更符合直觉，推荐在项目中全局设置：
*, *::before, *::after {
box-sizing: border-box;
}
高度计算同理
高度的计算逻辑与宽度一致：
content-box：总高度 = height + 上下 padding + 上下 border border-box：设定的 height 已包含 padding 和 border
注意：某些情况下，内容超出设定高度会导致实际高度变大，特别是未设置 overflow 时。
基本上就这些，关键在于理解 box-sizing 的作用以及各部分叠加关系。掌握这一点，布局时就不会出现“为什么元素比我想的宽”这类问题了。
以上就是css盒模型如何计算元素的实际宽高的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1030411.html
微信扫一扫 
支付宝扫一扫 
