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

时间 2019-11-07

原文原文链接

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

浏览器中的view hierarchy能够认为是整个dom结构，可是“根节点”很是混乱，咱们一般搞不清楚“根节点”是<body>、<html>、仍是window，仍是document？我对这几个节点深刻研究了一下，如下是个人总结。前端

注：全部测试均在mac的chrome下，其余浏览器未测试。不过原理基本相同git

我作了一个demo：http://linchen1987.github.io/tool/htmlbody/，你们能够边读文章边经过demo体会。github

1. 根View是谁？

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

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

windowdom

html测试

bodyspa

custom viewcode

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。