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

Question

我的理解是，

元素宽度=（左边框宽度+左边距宽度+内容宽度+右边距宽度+右边框宽度）

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

下面是相同的图表。

元素的宽度=（10 + 10 + 140 + 10 + 10）= 180

元素的高度=（10 + 10 + 150 + 10 + 10）= 190

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

content＆amp; padding仅包含在点击区域。

中

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

Answer 1

CSS计算height和width的方式并不像看起来那么简单明了。

您问题的最直接答案......

  

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

... is：这取决于所用盒子的类型。

根据CSS Visual Formatting Model：

  

10.3 Calculating widths and margins

     

元素width，margin-left，margin-right的值，   用于布局的left和right属性取决于类型   盒子生成和相互之间...需要以下情况   杰出的：

     

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

  

10.6 Calculating heights and margins

     

要计算top，margin-top，height，margin-bottom和bottom的值，必须区分各种方框：< / p>      

与上述相同的列表

我实际上希望通过列出构成至少几种盒子类型的宽度和高度的变量来创建一个简单的参考指南。所以我从块级开始，发现一般来说计算宽度很容易：

containing block width = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right

但是，当我达到身高时，我发现了这个：

  

10.6.3 Block-level non-replaced elements in normal flow when overflow computes to visible

     

此部分也适用于块中的非替换元素   overflow未计算到visible但正在计算的正常流量   传播到视口。

     

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

     

元素的高度是从顶部内容边缘到顶部内容边缘的距离   首先适用以下内容：

     

  
1. 最后一个行框的下边缘，如果该框用一行或多行建立内联格式化上下文
  
2. 如果孩子的下边距没有折叠，其最后一个流入的孩子的底部（可能是折叠的）边缘的下边缘   元素的下边距
  
3. 最后一个流入子项的下边界边缘，其上边距不会因元素的下边距而崩溃
  
4. 零，否则
        

只考虑正常流量的儿童（即   浮动框和绝对定位的框被忽略，并且   相对定位的盒子被认为没有它们的偏移）。注意   子框可能是一个匿名的阻止框。

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

TL; DR

要准确，具体地读取用于确定HTML元素宽度或高度的计算，请参阅CSS Visual Formatting Model。要了解元素的确切高度或宽度，请参阅开发人员工具中的计算值选项卡。

Answer 2

听起来你所描述的是一个元素的offsetWidth和offsetHeight，它返回＆＃34;布局的宽度和高度＆＃34;元素，即所有计算后的最终宽度。

MDN defines offsetWidth以下方式：

  

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

因此，要回答您的问题，元素的最终布局宽度通常是元素边框，水平填充，垂直滚动条宽度和内容宽度的总和。

最终布局高度（offsetHeight）将类似。

Answer 3

  

width CSS属性指定元素的内容区域的宽度。内容区域位于元素的填充，边框和边距内。

https://developer.mozilla.org/en-US/docs/Web/CSS/width

此页面更详细地解释了盒子模型：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model