html - 绝对定位中的 iframe 与 div

Question

我想知道为什么下面的 iframe 没有拉伸(stretch)到覆盖整个页面:

* {
  margin: 0;
  border: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  position: relative;
}
iframe {
  display: block;
  background: tan;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<iframe></iframe>

但是，div 会按预期拉伸(stretch)。

Answer 1

div 是一个不可替换 元素。当你绝对定位它时，它的宽度由 10.3.7 Absolutely positioned, non-replaced elements 中定义的 CSS 规则给出。 - 特别是在您的情况下，宽度在步骤 5 中确定。本质上是等式

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

用于 CSS 中除宽度外所有值都是固定的位置，因此计算宽度以使等式成立。

iframe 被认为是一个替换 元素。当你绝对定位它时，它的宽度由 10.3.8 Absolutely positioned, replaced elements 中定义的 CSS 规则给出。它将宽度计算推迟到 10.3.2 Inline, replaced elements 规则的最后一行- 即 iframe 没有固有宽度，因此其宽度通常计算为 300 像素。这类似于 img 元素，它也不会扩展以使用相同的 CSS 规则填充页面。但是图像通常确实具有固有宽度，因此使用的是宽度而不是 300 像素。

类似的规则适用于高度计算。