定义或计算div元素的默认大小在哪里?

时间:2016-01-26 09:32:28

标签: html css

我想知道浏览器如何计算没有给定大小的height元素的初始widthdiv值。鉴于此div,例如:

<div>
  TEST
</div>

我的浏览器(Chrome)计算此div的大小为1255 x 18,窗口大小为1271 x 284.看起来div默认为一行的高度和窗口的内部宽度减一些。但我想了解更多相关信息。

我在这里找不到任何东西: https://html.spec.whatwg.org/multipage/semantics.html#the-div-element

我在哪里可以找到这种信息?

4 个答案:

答案 0 :(得分:11)

div标记是块级元素。默认情况下,所有块级元素都继承其父元素的宽度。

在您的示例中,div继承了父body标记的宽度,并考虑了body元素上的任何边距或填充。

MDN通常是此类信息的重要信息来源 - 请参阅https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements

答案 1 :(得分:6)

它有display: block所以width100%heightauto所以它是内部任何内容的大小。

答案 2 :(得分:1)

根据spec,页边距应使用默认值8px。

  

对于下表中的每个属性(margin-topmargin-rightmargin-bottommargin-left),给定body元素,存在的第一个属性映射到像素body元素的length属性。如果找不到属性的任何属性,或者无法成功解析找到的属性的值,则该属性应使用默认值 8px 。< / p>

这就是为什么您的width是1255,即(1271-8 * 2)。高度来自内容TEST

我创建了一个稍微复杂一些的示例:

<body>
<div id="outer">
  <div style="display:inline">
    <div id="inner">
      X
    </div>
  </div>
</div>
</body>

身体

default size of a div

外部div

outer div

内联div

inline div

内部div

enter image description here

答案 3 :(得分:0)

所有块级元素都采用其父级的可用宽度。