我想知道浏览器如何计算没有给定大小的height
元素的初始width
和div
值。鉴于此div
,例如:
<div>
TEST
</div>
我的浏览器(Chrome)计算此div的大小为1255 x 18,窗口大小为1271 x 284.看起来div
默认为一行的高度和窗口的内部宽度减一些。但我想了解更多相关信息。
我在这里找不到任何东西: https://html.spec.whatwg.org/multipage/semantics.html#the-div-element
我在哪里可以找到这种信息?
答案 0 :(得分:11)
div
标记是块级元素。默认情况下,所有块级元素都继承其父元素的宽度。
在您的示例中,div
继承了父body
标记的宽度,并考虑了body元素上的任何边距或填充。
MDN通常是此类信息的重要信息来源 - 请参阅https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements
答案 1 :(得分:6)
它有display: block
所以width
是100%
,height
是auto
所以它是内部任何内容的大小。
答案 2 :(得分:1)
根据spec,页边距应使用默认值8px。
对于下表中的每个属性(
margin-top
,margin-right
,margin-bottom
,margin-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>
答案 3 :(得分:0)
所有块级元素都采用其父级的可用宽度。