CSS中html元素设置height:100%的作用及百分比高度相关疑问

html元素的父元素是什么？ #

在CSS的视觉格式化模型里，html元素的直接父容器是初始包含块（Initial Containing Block）。这个初始包含块的尺寸完全由浏览器的视口（Viewport）决定——也就是浏览器窗口的可视区域大小（不含地址栏、工具栏等浏览器控件）。

CSS如何解读html元素的高度？ #

默认状态下，html元素的高度值为auto，它的高度由内部内容的总高度决定：内容越多，html元素就会被撑得越高。需要注意的是，body元素默认带有少量margin，这会让html元素在默认状态下看起来比内容高度略高一点，但核心逻辑还是内容驱动高度。

设置html { height: 50%; }会产生什么效果？ #

当给html元素设置height: 50%;时，它的高度会被计算为初始包含块高度的50%，也就是当前浏览器视口高度的一半。

这里有个需要注意的连锁影响：

• 如果后续给body元素设置了百分比高度（比如body { height: 100%; }），那么body的高度会是html元素高度的100%，也就是视口高度的50%；
• 如果body保持默认的auto高度，那么body的高度依然由自身内容决定，不会继承html的这个50%高度。

内容的提问来源于stack exchange，提问作者Silver Pine