首先搞清楚window 和document的區(qū)別。
window對象表示瀏覽器中打開的窗口课兄。
document對象屬于window對象的一部分渺贤。
與window相關(guān)的寬高
window.innerHeight/innerWidth
這兩個屬性指的是瀏覽器頁面部分的寬高梁呈；window.outerHeight/outerWidth
此屬性指整個瀏覽器所占據(jù)的寬高，innerHeight包括了頁面部分以及上部的地址欄以及title部分皱卓，也就是整個瀏覽器的高度。
window.screen對象包含有關(guān)用戶屏幕的信息
此對象包含以下屬性：
- window.screen.height/width
這兩個寬高表示的是用戶屏幕的寬高部逮。比如我的顯示器的這兩個屬性分別是1080娜汁，1920，與瀏覽器寬高無關(guān)兄朋； - window.screen.availHeight/availWidth
表示用戶屏幕可利用的寬高掐禁； - window.screenTop/screenLeft
分別表示瀏覽器窗口距離屏幕上邊和左邊的距離。
與document相關(guān)的寬高
1.與client相關(guān)的寬高
- clientWidth和clientHeight
該屬性指元素可視區(qū)域的寬度/高度颅和，可視區(qū)域不包括滾動軸和border傅事。（padding + content - scrollbar）
注意： 在mac系統(tǒng)下，滾動軸默認(rèn)不可見峡扩，故不用減去滾動軸部分蹭越。 - clientLeft 和clientTop
該屬性指的是元素周圍邊框的厚度，即返回的是元素border的相關(guān)信息教届。
2.與offset相關(guān)的寬高
- offsetWidth與offsetHeight
該屬性指的是元素當(dāng)前所占有的全部寬高（border + padding + content）响鹃。
該屬性和元素內(nèi)容是否超出元素大小無關(guān)驾霜，只與最初設(shè)定的border、width买置、height有關(guān)粪糙。 - offsetLeft和offsetTop
offsetParent：
1.若當(dāng)前元素的父級元素沒有進(jìn)行定位，默認(rèn)的static除外忿项，元素的offsetParent為body蓉冈。
2.若存在定位，則offsetParent為距元素最近的已定位的父級元素倦卖。
IE6/7
offsetLeft = (offsetParent的padding-left) + (當(dāng)前元素的margin-left)洒擦；
IE8/9/10、Chrome
offsetLeft = (offsetParent的margin-left) + (offsetParent的border-left) + （offsetParent的padding-left） + (當(dāng)前元素的margin-left)怕膛；
FireFox
offsetLeft = (offsetParent的margin-left) + (offsetParent的padding-left) + (當(dāng)前元素的margin-left)
3.與scroll相關(guān)的寬高
- document.body.scrollWidth / scrollHeight
1.元素給定寬高小于瀏覽器窗口熟嫩，這兩個屬性分別指瀏覽器窗口的寬高
2.元素給定寬高大于瀏覽器窗口，且大于元素內(nèi)容的寬高褐捻，這兩個屬性分別指的是元素的width / height + （margin + padding + border）× 2
3.元素給定寬高大于瀏覽器窗口掸茅，且小于元素內(nèi)容的寬高，這兩個屬性指的是元素內(nèi)容寬高 + 內(nèi)容的（border + padding + margin） × 2 + 元素左側(cè) / 頂部 （margin + border + padding） - 在某div中的scrollWidth和scrollHeight
- 無滾動軸時：
scrollWidth = style.width + style.padding × 2 = clientWidth; - 有滾動軸時：
scrollWidth = 實際內(nèi)容寬度 + padding × 2 柠逞；
scrollHeight = 實際內(nèi)容高度 + padding × 2昧狮； - scrollLeft和scrollTop
指的是當(dāng)元素內(nèi)容寬高超出元素寬高時元素被卷起的寬高，可讀寫板壮，默認(rèn)情況下逗鸣，也即滾動條滾動的距離。
