如何理解html页面尺寸?
从第一天开始,这对我来说就是个谜。它依然如此。现在是揭示它的时候了。所以我做了一个test page,其中包含一个div
,这个范围可以改变。信息面板显示相关属性的值。为简单起见,我们只需使用Chrome。如何理解html页面尺寸?
默认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
?有没有比“只是如此”更好的解释?为什么
body
的scrollLeft
/scrollTop
在我滚动页面时发生了变化?它不拥有滚动条,是吗?
此外,一些总结将就位。
因此,在视口(窗口)中显示一个画布。在画布上我们有html
元素,其中包含body
。他们大多喜欢div
S,但有一些怪癖:在默认情况下(width: auto
)
html
元素拉伸以适应视口。不是一个怪癖可能。视口是html
的容器。而作为一个普通的div
它默认情况下适合容器宽度(不包括滚动条)。html
的高度大到适合body
元素。但由于某种原因,其clientHeight
等于视口高度减去滚动条。就好像它沿着Y轴伸展以适合视口一样。body
的scrollLeft
/scrollTop
特性反映视口的pageXOffset
/pageYOffset
body
的上边距不符合的一个body
html
崩溃显示没有延伸至底部的迹象除非您拥有例如绝对定位的元素,并且bottom
属性被设置,否则视口的边缘。从offsetParent
值,body
充当元件,相对于该绝对定位元件由缺省呈现(除非有其他绝对定位元素层次结构向上)
与Firefox所不同的是它的html
的判断scrollLeft
/scrollTop
镜像视口的属性pageXOffset
/pageYOffset
。
这一切都只是我对我所看到的东西的解释。如果有人要纠正我,我会很高兴。