Javascript 我如何理解html页面维度？

从第一天起，这对我来说就是个谜。现在仍然如此。现在是揭示它的时候了。所以我做了一个，包含一个

div

，您可以更改它的范围。和显示相关属性值的信息面板。为了简单起见，我们只使用Chrome

默认的

body

边距为

8px

html

的背景是蓝色，

body

是绿色，

div

是红色。在这里我们可以看到

html

的

offsetHeight

等于

body.offsetHeight+2*body.margin

，就好像它只是封装

body

。但是

html.clientHeight

=

window.innerHeight

，就好像它被拉伸以填充视口一样

现在，让我们添加水平滚动条（使

div

的宽度

1000px

），并向右滚动一点：

html

和

body

向左移动

body

的

scrollLeft

与

窗口同步更改。pageXOffset

就像它拥有滚动条一样<由于添加了滚动条，code>html的

clientHeight

发生了更改

让我们用另一种方法（垂直滚动条）：

现在

html

的范围都改变了（

offsetWidth

和

clientWidth

）。这表明它不拥有滚动条

最后，使用两个滚动条：

嗯，在这一点上，事情或多或少对我来说是这样的。至少只要我们只考虑Chrome。但还有几件事我想知道

• 为什么

  html

  的

  clientHeight

  可能会小于

  offsetHeight

  ？有什么比“就是这样”更好的解释吗

• 为什么

  body

  的

  scrollLeft

  /

  scrollTop

  在我滚动页面时会发生变化？它没有滚动条，是吗

---

还有一些摘要。

因此，有一个画布显示在视口（窗口）中。在画布上我们有

html

元素，它包含

body

。它们大多类似于

div

s，但有一些怪癖：

• 默认情况下，沿X轴

  html

  元素（

  width:auto

  ）拉伸以适应视口。可能不是什么怪癖。视口是

  html

  的容器。作为普通的

  div

  默认情况下，它适合容器宽度（不包括滚动条）

• html

  的高度与

  body

  元素的高度一样大。但由于某种原因，它的

  clientHeight

  等于视口高度减去滚动条。就像它也沿Y轴拉伸以适合视口一样

• body

  的

  scrollLeft

  /

  scrollTop

  属性镜像视口的

  pageXOffset

  /

  pageYOffset

• body

  的上边距不会与

  html

  的上边距一起折叠

• body

  显示没有延伸到视口下边缘的迹象，除非您设置了

  bottom

  属性的绝对定位元素。根据

  offsetParent

  值判断，

  body

  充当元素，默认情况下相对于绝对定位元素呈现（除非层次结构上存在其他绝对定位元素）

与Firefox不同的是，它是

html

的

scrollLeft

/

scrollTop

属性，镜像了viewport的

pageXOffset

/

pageYOffset

这一切只是我对我所见的解释。如果有人纠正我，或者补充我的发现，我会很高兴