logo标签列表

如何计算元素的宽度和高度？

htmlcss
5

我的理解是，

元素的宽度 =（左边框宽度 + 左填充宽度 + 内容宽度 + 右填充宽度 + 右边框宽度）

元素的高度 =（顶部边框高度 + 顶部填充高度 + 内容高度 + 底部填充高度 + 底部边框高度）

以下是相同内容的图示。

enter image description here

一个元素的宽度 = (10+10+140+10+10) = 180

一个元素的高度 = (10+10+150+10+10) = 190

margin 不包含在元素的大小中。

content 和 padding 只包含在点击区域中。

上述公式计算html元素的width和height是否正确？

我开始写答案，但是我意识到现在写出来需要太长时间，但答案是“是的，有时候，这取决于许多因素”。 - zzzzBov
这是一个纯理论问题，还是你有具体的问题？直接、实际的回答是 - 如果我不能更改页面的CSS，我会使用JavaScript... :) - sinisake
3个回答
3
看起来你所描述的是元素的offsetWidth和offsetHeight，它返回元素的“布局宽度和高度”，即在所有计算后的最终宽度。
MDN定义offsetWidth如下：

HTMLElement.offsetWidth只读属性返回元素的布局宽度。通常，元素的offsetWidth是包括元素边框、元素水平填充、元素垂直滚动条（如果存在，如果呈现）和元素CSS宽度的测量。

因此，要回答你的问题，元素的最终布局宽度通常是元素边框、水平填充、垂直滚动条宽度和内容宽度的总和。
最终布局高度(offsetHeight)也是类似的。
1
CSS计算元素的高度和宽度并不像看起来那么简单和直接。对于你的问题，最直接的答案是：“它取决于所使用的盒子类型”。根据CSS可视化格式模型，如下CSS Visual Formatting Model：

10.3 计算宽度和边距

元素的 width、margin-left、margin-right、left 和 right 属性在布局中所使用的值取决于生成的盒子类型以及彼此之间的关系... 需要区分以下情况：

  1. 内联非替换元素
  2. 内联替换元素
  3. 正常流中的块级非替换元素
  4. 正常流中的块级替换元素
  5. 浮动非替换元素
  6. 浮动替换元素
  7. 绝对定位非替换元素
  8. 绝对定位替换元素
  9. inline-block 正常流中的非替换元素
  10. inline-block 正常流中的替换元素

10.6 计算高度和边距

在计算 top、margin-top、height、margin-bottom 和 bottom 的值时，必须区分各种类型的框：

与上面相同的列表

我本打算通过列举几个框类型的宽度和高度变量来创建一个简单的参考指南。所以我从块级开始，发现计算宽度是比较容易的： 包含块宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right 但是当我到了高度时，我发现这个：

10.6.3块级非替换元素在overflow计算为visible时的正常流程中

当overflow不计算为visible但已传播到视口时，此部分也适用于正常流程中的块级非替换元素。

如果margin-top或margin-bottom为auto，则它们的使用值为0。如果height为auto，则高度取决于元素是否具有任何块级子元素以及是否具有填充或边框：

元素的高度是从其顶部内容边缘到以下第一个适用项的距离：

  1. 如果该框与一个或多个行建立内联格式上下文，则为最后一行框的底部边缘
  2. 其最后一个流入子级的底部（可能折叠）边缘的底部（可能折叠）边缘，如果子级的底部边距不与元素的底部边距折叠
  3. 其顶部边距不与元素的底部边距折叠的最后一个流入子元素的底部边框边缘
  4. 否则为零

仅考虑正常流中的子级（即，忽略浮动框和绝对定位框，并且考虑相对定位框而不考虑其偏移）。请注意，子框可能是匿名块框。

计算身高时需要考虑许多因素。

简而言之

要准确并具体地计算HTML元素的宽度或高度，请参考CSS可视化格式模型。要了解元素的确切高度或宽度，请参考开发者工具中的计算值选项卡。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接