摘要：浏览器中的可以认为是整个结构，但是根节点非常混乱，我们通常搞不清楚根节点是还是，还是我对这几个节点深入研究了一下，以下是我的总结。结论显示元素中，根元素不是，是。
做前端开发的同学都会知道，每一个UI系统（比如IOS或Android）中都会有一个view hierarchy（视图层级）的概念，即所有的可视元素（大到一个页面，小到一个button）都在一个树形结构中，而树形结构的”根节点“为window，即整个屏幕或窗口。
浏览器中的view hierarchy可以认为是整个dom结构，但是“根节点”非常混乱，我们通常搞不清楚“根节点”是、、还是window，还是document？ 我对这几个节点深入研究了一下，以下是我的总结。
注：所有测试均在mac的chrome下，其他浏览器未测试。不过原理基本相同
我做了一个demo：http://linchen1987.github.io/tool/htmlbody/，大家可以边读文章边通过demo体会。
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一直是这样的：
2. window，html和body的overflow属性window
html
body
custom view
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。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49572.html
现在关于讲述scrollTop、clientHeight、 scrollHeight 的内容讲的都不深，这篇文章就深入了解下。这篇文章主要给大家讲述下这些概念的理解，并总结了这些概念彼此之间的数量关系和应用场景。 1.clientWidth、clientHeight、clientLeft、clientTop 1.1 clientWidth （1）含义：只读属性，表示元素的内部宽度，单位为...
实践是所有展示最好的方法，因此我觉得可以不必十分细致的，但我们的展示却是整体的流程、输入和输出。现在我们就看看Vue 的指令、内置组件等。也就是第二篇，模型树优化。 分析了 Vue 编译三部曲的第一步，「如何将 template 编译成 AST ?」上一篇已经介绍，但我们还是来总结回顾下，parse 的目的是将开发者写的 template 模板字符串转换成抽象语法树 AST ，AST 就这里...
小编写这篇文章的一个主要目的，主要是来给大家去做一个介绍，介绍的内容主要是关于Python的一些知识，其中的内容包含有xpath,JsonPath,bs4等一些知识，主要是去介绍他们的一些基本使用方法，具体的内容，下面就给大家详细解答下。 1.xpath 1.1 xpath使用 google提前安装xpath插件，按ctrl+shift+x出现小黑框 安装lxml库pip instal...
摘要：主要通过样式为其赋予不同的表现标签用来定义内联行内元素，并无实际的意义。html文档结构 1 DOCTYPE html> 2 <html lang="zh-CN"> #这个lang表示语言，zh-CN中文的意思，整个文档的内容以中文为主，如果以英文为主，就写成lang=en 3 4 <head> 5 <meta charset...
如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字文档流还有其他现象底部对齐，高矮不管文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐例：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>t...
阅读 2262·2021-11-15 18:14
阅读 1535·2021-10-14 09:42
阅读 3499·2021-10-11 10:58
阅读 3710·2021-10-09 09:44
阅读 2624·2021-10-09 09:41
阅读 2248·2021-09-26 09:55
阅读 2197·2021-09-24 10:38
阅读 1784·2021-09-04 16:48
