浏览器 html 看层级,浏览器视图层级中的“根”：和的属性研究

做前端开发的同学都会知道，每一个UI系统(比如IOS或Android)中都会有一个view hierarchy(视图层级)的概念，即所有的可视元素(大到一个页面，小到一个button)都在一个树形结构中，而树形结构的”根节点“为window，即整个屏幕或窗口。

浏览器中的view hierarchy可以认为是整个dom结构，但是“根节点”非常混乱，我们通常搞不清楚“根节点”是

注：所有测试均在mac的chrome下，其他浏览器未测试。不过原理基本相同

1. 根View是谁？

demo中可以看到：html和body没有充满整个屏幕，而是一个普普通通的块级元素(大家可以修改width和height属性看效果)。我们知道，body的父视图是html，那么html还会有一个父视图，这个父视图是什么呢？ 是window！也是浏览器中的根元素！这个元素的实例即为window对象(尺寸为window.innerWidth和window.innerHeight，可以监听resize事件等等)。那么document是什么呢？document虽然是整个DOM结构的根节点，但是document并不是显示元素，所以与view hierarchy无关。

结论：显示元素中，根元素不是html，是window。不过我们只会在body下创建子元素。浏览器的view hierarchy一直是这样的：

window

html

body

custom view

2. window，html和body的overflow属性

window像其他元素一样，是具有overflow属性的。window的overflow属性只有两个值：hidden和scroll。window的overflow属性取决于html和body的overflow属性，并且window可能改变html和body的overfow属性，很神奇吧。 规则如下：

window会首先查找html的overflow属性。如果html的overflow为scroll或者hidden，则据为己用，html的实际overflow效果则变为visible。

当html设置visible时，window则会查找body的overflow属性，与html一样，如果为scroll或者hidden，则据为己用，此时body的实际overflow效果变为visible。

当html和body均设为visible时，window不找他们俩的麻烦了，自己默默设定为scroll。这也是默认的情况。

结论：

html不论overflow设置什么，最终效果均为visible。

html为hidden或scroll时，window的overflow取决于html；

html为visible时，body不论overflow设置什么，最终效果均为visible。

html为visible，body为hidden或scroll时，window的overflow取决于body的overflow

html为visible，body为visible时，window为scroll

3. window，html和body的background属性

同overflow，window也具有background属性。window的background属性取决于html和body，并且会影响html和body。 结论如下：

html只要设置了background(即background不为transparent)，window会将html的background据为己用，而html的background则变为transparent。

html为transparent时，只要body只要设置了background(即background不为transparent)，window的background会将body的transparent据为己用，而body的background则变为transparent。

html和body的background都为transparent时，window的background为浏览器默认的颜色(白色)，这也是默认的情况。

欢迎大家交流讨论，直接留言或邮箱linchen.1987@foxmail.com。