首先搞清楚window 和document的区别。
window对象表示浏览器中打开的窗口。
document对象属于window对象的一部分。
与window相关的宽高
window.innerHeight/innerWidth
这两个属性指的是浏览器页面部分的宽高；window.outerHeight/outerWidth
此属性指整个浏览器所占据的宽高，innerHeight包括了页面部分以及上部的地址栏以及title部分，也就是整个浏览器的高度。
window.screen对象包含有关用户屏幕的信息
此对象包含以下属性：
- window.screen.height/width
这两个宽高表示的是用户屏幕的宽高。比如我的显示器的这两个属性分别是1080，1920，与浏览器宽高无关； - window.screen.availHeight/availWidth
表示用户屏幕可利用的宽高； - window.screenTop/screenLeft
分别表示浏览器窗口距离屏幕上边和左边的距离。
与document相关的宽高
1.与client相关的宽高
- clientWidth和clientHeight
该属性指元素可视区域的宽度/高度，可视区域不包括滚动轴和border。（padding + content - scrollbar）
注意： 在mac系统下，滚动轴默认不可见，故不用减去滚动轴部分。 - clientLeft 和clientTop
该属性指的是元素周围边框的厚度，即返回的是元素border的相关信息。
2.与offset相关的宽高
- offsetWidth与offsetHeight
该属性指的是元素当前所占有的全部宽高（border + padding + content）。
该属性和元素内容是否超出元素大小无关，只与最初设定的border、width、height有关。 - offsetLeft和offsetTop
offsetParent：
1.若当前元素的父级元素没有进行定位，默认的static除外，元素的offsetParent为body。
2.若存在定位，则offsetParent为距元素最近的已定位的父级元素。
IE6/7
offsetLeft = (offsetParent的padding-left) + (当前元素的margin-left)；
IE8/9/10、Chrome
offsetLeft = (offsetParent的margin-left) + (offsetParent的border-left) + （offsetParent的padding-left） + (当前元素的margin-left)；
FireFox
offsetLeft = (offsetParent的margin-left) + (offsetParent的padding-left) + (当前元素的margin-left)
3.与scroll相关的宽高
- document.body.scrollWidth / scrollHeight
1.元素给定宽高小于浏览器窗口，这两个属性分别指浏览器窗口的宽高
2.元素给定宽高大于浏览器窗口，且大于元素内容的宽高，这两个属性分别指的是元素的width / height + （margin + padding + border）× 2
3.元素给定宽高大于浏览器窗口，且小于元素内容的宽高，这两个属性指的是元素内容宽高 + 内容的（border + padding + margin） × 2 + 元素左侧 / 顶部 （margin + border + padding） - 在某div中的scrollWidth和scrollHeight
- 无滚动轴时：
scrollWidth = style.width + style.padding × 2 = clientWidth; - 有滚动轴时：
scrollWidth = 实际内容宽度 + padding × 2 ；
scrollHeight = 实际内容高度 + padding × 2； - scrollLeft和scrollTop
指的是当元素内容宽高超出元素宽高时元素被卷起的宽高，可读写，默认情况下，也即滚动条滚动的距离。
