這篇文章會說明documentElement（html）、body、普通的element（如div）作為Element對象時，上述屬性的不同表現，和他們所遵循的基本準則。另外還有window的幾個簡單的屬性。
前幾天筆試碰到了一道關于可視區域高度通過什麼屬性取值的問題，面對四個選項一臉傻樣兒，趕緊複習了一下。發現element的clientHeight、scrollHeight、offsetHeight和window的outerHeight、innerHeight、screen.height這幾個屬性還真不好區分，在網上查閱一番資料後，總結出來供以後參考。
正文：
我們先把這些屬性分為element和window。
Element
首先我們需要了解到一個元素具有content、padding、border以及可能出現的滾動條。那麼他們的結構請見下圖。
在沒有滾動條的時候也就是内容不溢出時：
clientHeight：content + padding
scrollHeight：content + padding
offsetHeight：content + padding + border + 水準滾動條的高度（如果有的話）
下邊是具有滾動條的情況：
clientHeight：可視區域，大小不變等同于沒有内容溢出時的clientHeight
offsetHeight：可視區域，大小不變等同于沒有内容溢出時的offsetHeight
scrollHeight：content + padding-top + padding-bottom
需要特别注意的是：在element為body和html的時候，特别容易混淆！
Element為body時
這種情況比較簡單，clientHeight、offsetHeight、innerHeight三者的大小都相同，不論有沒有内容溢出。
至于原因，body的高度和内容等高，而且一般情況下body不具備padding和border，隻有content，因為沒人會給body設定内邊距和邊框。
Element為Html時
我們需要先清楚一點，html的高度一般等同于浏覽器可視視窗大小
相當于對html設定了overflow：scroll ，而當html的子元素body的高度超過html後就會出現滾動條
clietHeight規則還是如上所展示的，那麼顯而易見：
documentElement.clientHeight = 浏覽器可視視窗大小（不論内容是否溢出）
但是offsetHeight和scrollHeight很奇怪，我一直不了解，如果哪位同學知道還望指點。疑惑如下：
當沒有滾動條時，即内容不溢出：
documentElement.offsetHeight：body的内容高度 遵循content + padding
documentElement.scrollHeight = documentElement.clientHeight （ ？？？）
當有滾動條時，即内容溢出：
documentElement.offsetHeight = documentElement.scrollHeight（ ？？？）
Window
接下來說說浏覽器的幾個屬性outerHeight、innerHeight、screen.height
innerHeight：浏覽器可視視窗的大小，也就是從你的浏覽器下沿到你的工具欄下沿。
這個大小等同于documentElement.clientHeight。
outerHeight：很好了解，從你的浏覽器上沿到下沿，包含菜單欄、工具欄等。
screen.height：分辨率高度，即電腦螢幕的高度
寫在最後：
第一次寫部落格文章，描述的不太專業，如果有疑問或者發現什麼錯誤，歡迎留言！