資訊專欄INFORMATION COLUMN
摘要：瀏覽器中的可以認為是整個結構，但是根節(jié)點非常混亂，我們通常搞不清楚根節(jié)點是還是，還是我對這幾個節(jié)點深入研究了一下，以下是我的總結。結論顯示元素中，根元素不是，是。
做前端開發(fā)的同學都會知道，每一個UI系統(tǒng)（比如IOS或Android）中都會有一個view hierarchy（視圖層級）的概念，即所有的可視元素（大到一個頁面，小到一個button）都在一個樹形結構中，而樹形結構的”根節(jié)點“為window，即整個屏幕或窗口。
瀏覽器中的view hierarchy可以認為是整個dom結構，但是“根節(jié)點”非?；靵y，我們通常搞不清楚“根節(jié)點”是、、還是window，還是document？ 我對這幾個節(jié)點深入研究了一下，以下是我的總結。
注：所有測試均在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，可以監(jiān)聽resize事件等等）。那么document是什么呢？document雖然是整個DOM結構的根節(jié)點，但是document并不是顯示元素，所以與view hierarchy無關。
結論：顯示元素中，根元素不是html，是window。不過我們只會在body下創(chuàng)建子元素。瀏覽器的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屬性，很神奇吧。 規(guī)則如下：
window會首先查找html的overflow屬性。如果html的overflow為scroll或者hidden，則據(jù)為己用，html的實際overflow效果則變?yōu)関isible。
當html設置visible時，window則會查找body的overflow屬性，與html一樣，如果為scroll或者hidden，則據(jù)為己用，此時body的實際overflow效果變?yōu)関isible。
當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據(jù)為己用，而html的background則變?yōu)閠ransparent。
html為transparent時，只要body只要設置了background（即background不為transparent），window的background會將body的transparent據(jù)為己用，而body的background則變?yōu)閠ransparent。
html和body的background都為transparent時，window的background為瀏覽器默認的顏色（白色），這也是默認的情況。
歡迎大家交流討論，直接留言或郵箱linchen.1987@foxmail.com。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/49572.html
現(xiàn)在關于講述scrollTop、clientHeight、 scrollHeight 的內(nèi)容講的都不深，這篇文章就深入了解下。這篇文章主要給大家講述下這些概念的理解，并總結了這些概念彼此之間的數(shù)量關系和應用場景?！ ?.clientWidth、clientHeight、clientLeft、clientTop 1.1 clientWidth ?。?）含義：只讀屬性，表示元素的內(nèi)部寬度，單位為...
實踐是所有展示最好的方法，因此我覺得可以不必十分細致的，但我們的展示卻是整體的流程、輸入和輸出。現(xiàn)在我們就看看Vue 的指令、內(nèi)置組件等。也就是第二篇，模型樹優(yōu)化?！ 》治隽?Vue 編譯三部曲的第一步，「如何將 template 編譯成 AST ?」上一篇已經(jīng)介紹，但我們還是來總結回顧下，parse 的目的是將開發(fā)者寫的 template 模板字符串轉換成抽象語法樹 AST ，AST 就這里...
小編寫這篇文章的一個主要目的，主要是來給大家去做一個介紹，介紹的內(nèi)容主要是關于Python的一些知識，其中的內(nèi)容包含有xpath,JsonPath,bs4等一些知識，主要是去介紹他們的一些基本使用方法，具體的內(nèi)容，下面就給大家詳細解答下?！ ?.xpath 1.1 xpath使用 google提前安裝xpath插件，按ctrl+shift+x出現(xiàn)小黑框 安裝lxml庫pip instal...
摘要：主要通過樣式為其賦予不同的表現(xiàn)標簽用來定義內(nèi)聯(lián)行內(nèi)元素，并無實際的意義。html文檔結構 1 DOCTYPE html> 2 <html lang="zh-CN"> #這個lang表示語言，zh-CN中文的意思，整個文檔的內(nèi)容以中文為主，如果以英文為主，就寫成lang=en 3 4 <head> 5 <meta charset...
如果在一行內(nèi)寫文字，文字過多，那么瀏覽器會自動換行去顯示我們的文字文檔流還有其他現(xiàn)象底部對齊，高矮不管文字還有圖片大小不一，都會讓我們頁面的元素出現(xiàn)高矮不齊的現(xiàn)象，但是在瀏覽器查看我們的頁面總會發(fā)現(xiàn)底邊對齊例：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>t...
閱讀 2587·2021-11-15 18:14
閱讀 1794·2021-10-14 09:42
閱讀 3865·2021-10-11 10:58
閱讀 4115·2021-10-09 09:44
閱讀 2566·2021-09-26 09:55
閱讀 2613·2021-09-24 10:38
閱讀 2119·2021-09-04 16:48
閱讀 3367·2021-09-02 15:21
