获取浏览器窗口的大小
文档区域 ：指的是html或body的宽高（不包含导航栏，地址栏等浏览器组件）。
窗口 ：指的是整个浏览器窗口（包含导航栏，地址栏等浏览器组件）
文档可视区域 ：指的是文档区域中可以看到网页内容的区域，例如当文档区域可以滚动的时候，减去被隐藏的区域，剩下的就是可见的区域。
视口 ：浏览器中呈现网页内容的区域（不包含导航栏，地址栏等浏览器组件）
1.1 innerHeight和innerWidth
这两个属性是window下的属性，表示的是文档的可视区域。
ie8不支持这两个属性。
1.2 outerHeight和outerHeight
这个两个属性也是window下的属性，表示的是窗口的大小。
需要注意的是，在以往的谷歌浏览器版本中存在bug，innerHeight,innerWidth,outerHeight,outerWidth这四个属性返回同样的值。
另外，这四个属性在ie8中不存在。
2、clientWidth和clientHeight
这两个属性表示的是元素的宽高及内边距的大小。如果是滚动元素，不包含被隐藏的部分。
ie8包括其他主流的旧版本的浏览器都支持document.documentElement.clientWidth和document.documentElement.clientHeight来获取文档的可视区域。如果是在混杂模式下的ie6，则必须通过document.body.clientWidth和document.body.clientHeight来获取文档的可视区域。旧版本的浏览器中并没有提供窗口大小的信息。
这两个属性同样也可以用来获取元素的大小，例如element.clientHeight或Width,获取的是元素的宽高包含内边距的大小。
3、兼容方法(兼容ie8)
function getWindowSize () {
var width = window.innerWidth;
var height = window.innerHeight;
if (typeof width !== 'number') {
if (document.documentElement.clientWidth) {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
}
return {'width' : width, 'height' : height};
}
获取元素的偏移量
1、offsetHeight和offsetWidth
这两个属性包含在元素对象上，表示着元素可见的面积大小，包括元素的宽高，边框与内边距，而不包括外边距。
element.offsetHeight //垂直面积
element.offsetWidth //水平面积
2、offsetLeft和offsetTop
1、普通定位流
1.1 对于position:static的元素，如果其父元素的position属性也都为static，那么这时候子元素的父级定位元素为body,所以：
offsetLeft指的是子元素的左外边框距离body的左内边框之间的距离
offsetTop指的是子元素的上外边框距离body的上内边框之间的距离
1.2 对于position:static的元素，如果其父元素的position属性为除static之外的一种，那么这时候子元素是相对于父元素进行定位的，所以：
offsetLeft指的是子元素的左外边框距离父元素的左内边框之间的距离
offsetTop指的是子元素的上外边框距离父元素的上内边框之间的距离
2、固定定位流
对于position属性值为fixed的元素，是相对于视口的左上角进行定位的，所以：
offsetLeft指的是元素的左外边框距离视口的左端之间的距离。
offsetTop指的是元素的上外边框距离视口顶端之间的距离。
3、相对定位流
3.1 对于position属性值为relative的元素，如果其父元素的position值为static，那么这时候子元素是相对于父元素进行定位的，所以：
offsetLeft指的是子元素的左外边框距离父元素左内边框之间的距离。
offsetTop指的是子元素的上边外框距离父元素的上内边框之间的距离。
3.2 如果父元素中有一个元素的position值为除static之外的值，那么子元素是相对于该父元素进行定位的。
注意，谷歌中有一个bug，就是当子元素和父元素的position值为static的时候，body下的一级子元素是的offsetTop为子元素的上外边框到父元素上外边框的距离，而不是上内边框的距离，而下一层的子元素则没有这样的问题。
4、绝对定位
对于position值为absolute的元素，如果其父元素的position值都为static，那么子元素是相对于视口左上角定位的。
offsetLeft指的是元素的左外边框距离视口的左端之间的距离。
offsetTop指的是元素的上外边框距离视口顶端之间的距离。
如果其父元素中有一个元素的position值为除static以外的值，那么这时候子元素就是相对于该父元素进行定位的，
offsetLeft指的是子元素的左外边框距离父元素左内边框之间的距离。
offsetTop指的是子元素的上边外框距离父元素的上内边框之间的距离。
如果父级元素都拥有position为static之外的值，那么父级定位元素为最近的一个父元素。
3、offsetParent
element.offsetParent.offsetTop表示的是元素的父级定位元素的垂直偏移量,element.offsetParent.offsetLeft同理。
需要注意的是，element.offsetParent表示的并不是父级元素，而是父级定位元素，例如上述html结构中，id为id3的div元素的offsetParent获取的是id1父元素，而不是id2元素。
通过累加子元素的所有父定位元素的偏移值，即可得到子元素相对于视口左上角的偏移量。
4、scrollHeight、scrollWidth、scrollLeft、scrollTop
parent.scrollHeight表示的是元素包含的滚动元素的总高度(滚动元素的边框，内外边距的变化都会影响到这个值，scrollWidth同理)
parent.scrollTop表示的是滚动元素在垂直方向上被隐藏掉的部分的高度。(从父元素的上内边框到滚动元素的上外边框之间的距离，scrollLeft同理)
通过监听滚动事件，可以实时获取元素的滚动值：
let parent = document.getElementById('parent');
document.getElementById('parent').addEventListener('scroll',() => {
if (parent.scrollTop > 100) parent.scrollTop = 0;
});
实例中，通过监听parent的滚动事件，当滚动值大于100px时，将滚动值重新定位成0，这将会把滚动条的位置移动到最顶部。
5、getBoundingClientRect方法
getBoundingClientRect方法用于获取元素相对于视口的左上角的偏移量。该方法返回一个对象，包含上下左右方向的偏移量
element.getBoundingClientRect();
需要注意的是,在ie8中，视口的初始坐标值为(2,2),而ie9及其他现代主流浏览器的视口初始左边值为(0,0);因此，在需要兼容ie8的情况下，需要减去2个像素。