css盒模型如何计算元素的实际宽高

元素实际宽高由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 不属于元素“自身”的尺寸，但在页面布局中会影响其占据的空间。

例如：

立即学习“前端免费学习笔记（深入）”；

此时元素的实际宽度（占据空间）为：

200 + 10×2 + 5×2 + 20×2 = 270px

算家云

高效、便捷的人工智能算力服务平台

37

查看详情

使用 border-box 改变计算方式

当设置 box-sizing: border-box 时，width 和 height 包含了 content、padding 和 border，此时你设定的 width 就是元素最终的总宽度（不含 margin）。

• 总宽度 = 设定的 width（已包含 padding 和 border）
• 实际占据宽度 = width + 左右 margin

这更符合直觉，推荐在项目中全局设置：

高度计算同理

高度的计算逻辑与宽度一致：

• content-box：总高度 = height + 上下 padding + 上下 border
• border-box：设定的 height 已包含 padding 和 border

注意：某些情况下，内容超出设定高度会导致实际高度变大，特别是未设置 overflow 时。

基本上就这些，关键在于理解 box-sizing 的作用以及各部分叠加关系。掌握这一点，布局时就不会出现“为什么元素比我想的宽”这类问题了。

以上就是css盒模型如何计算元素的实际宽高的详细内容，更多请关注php中文网其它相关文章！