我如何理解 html 页面尺寸？
How do I understand html page dimensions?
从第一天起，这对我来说就是个谜。现在仍然如此。是时候揭示它了。所以我制作了一个 test page，其中包含一个 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 与 window.pageXOffset 同步更改，就好像它拥有滚动条一样。由于添加了滚动条，html 的 clientHeight 发生了变化。
让我们反过来做（垂直滚动条）：
现在 html 的范围都已更改（offsetWidth 和 clientWidth）。这表明它不拥有滚动条。
最后，使用两个滚动条：
嗯，在这一点上，事情对我来说或多或少是clear。至少只要我们只考虑 Chrome。但还有一些事情我想知道。
为什么html的clientHeight可能比offsetHeight少？还有比"it's just so"更好的解释吗？
为什么 body 的 scrollLeft/scrollTop 在我滚动页面时发生变化？它不拥有滚动条，是吗？
也会有一些总结。
因此，在视口 (window) 中显示了一个 canvas。在 canvas 上，我们有 html 元素，其中包含 body。他们大多像 divs，但有一些怪癖：
默认情况下 html 元素 (width: auto) 沿 X 轴拉伸以适合视口。可能不是怪癖。视口是 html 的容器。作为一个普通的 div 它默认适合容器宽度（不包括滚动条）。
html 的高度与 body 元素一样大。但出于某种原因，它的 clientHeight 等于视口高度减去滚动条。好像它也沿着 Y 轴拉伸以适合视口。
body 的 scrollLeft/scrollTop 属性镜像视口的 pageXOffset/pageYOffset
body 的顶部边距不会与 html 的顶部边距折叠
body 没有显示延伸到视口底部边缘的迹象，除非你有，例如，设置了 bottom 属性 的绝对定位元素。从offsetParent值来看，body作为一个元素，绝对定位元素默认是相对于它渲染的（除非层级上还有其他绝对定位元素）
Firefox 的不同之处在于 html 的 scrollLeft/scrollTop 属性反映了视口的 pageXOffset/pageYOffset。
这一切只是我对所见所闻的解释。如果有人纠正我或补充我的发现，我会很高兴。
从第一天起，这对我来说就是个谜。现在仍然如此。是时候揭示它了。所以我制作了一个 test page，其中包含一个 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 与 window.pageXOffset 同步更改，就好像它拥有滚动条一样。由于添加了滚动条，html 的 clientHeight 发生了变化。
让我们反过来做（垂直滚动条）：
现在 html 的范围都已更改（offsetWidth 和 clientWidth）。这表明它不拥有滚动条。
最后，使用两个滚动条：
嗯，在这一点上，事情对我来说或多或少是clear。至少只要我们只考虑 Chrome。但还有一些事情我想知道。
为什么
html的clientHeight可能比offsetHeight少？还有比"it's just so"更好的解释吗？为什么
body的scrollLeft/scrollTop在我滚动页面时发生变化？它不拥有滚动条，是吗？
也会有一些总结。
因此，在视口 (window) 中显示了一个 canvas。在 canvas 上，我们有 html 元素，其中包含 body。他们大多像 divs，但有一些怪癖：
默认情况下
html元素 (width: auto) 沿 X 轴拉伸以适合视口。可能不是怪癖。视口是html的容器。作为一个普通的div它默认适合容器宽度（不包括滚动条）。html的高度与body元素一样大。但出于某种原因，它的clientHeight等于视口高度减去滚动条。好像它也沿着 Y 轴拉伸以适合视口。body的scrollLeft/scrollTop属性镜像视口的pageXOffset/pageYOffsetbody的顶部边距不会与html的顶部边距折叠body没有显示延伸到视口底部边缘的迹象，除非你有，例如，设置了bottom属性 的绝对定位元素。从offsetParent值来看，body作为一个元素，绝对定位元素默认是相对于它渲染的（除非层级上还有其他绝对定位元素）
Firefox 的不同之处在于 html 的 scrollLeft/scrollTop 属性反映了视口的 pageXOffset/pageYOffset。
这一切只是我对所见所闻的解释。如果有人纠正我或补充我的发现，我会很高兴。