window.screen.height|width看名称应该知道是获取整个屏幕的大小的这个值是固定的，而window.innerHeight是会根据浏览器窗口大小变化。
window.screen.availHeight|availWidth获取整个屏幕可用区域大小的可以理解为这是除去操作系统工具栏以外的可见区域大小。
window.innerHeight|innerWidth获取可视区域大小，理解为整个浏览器除去浏览器上下工具栏的可见区域大小（注意：这包括滚动条在一起计算）。
document.documentElement.clientHeight|clientWidth也是获取可视区域大小的，理解为文档的可见区域大小，根据浏览器窗口大小变化（注意：这个不包括滚动条计算）。
两个获取可视区域的代码在一起，window获取窗口的可视区域，document获取文档的可视区域
document.documentElement.offsetHeight|offsetWidth获取整个文档的大小，理解为获取html的大小（注意：是整个文档的大小，不是可见大小，不包括滚动条）
关于滚动条会不会计算
滚动条是属于浏览器窗口的东西。根据我们对面向对象封装的理解，属性都会被封装到自己的类里面，我们的文档页面里的对象肯定不知道不属于它的属性的值。只有浏览器自己知道它的值是多少，而我们的window对象可以理解为就是浏览器实例的一个引用，这样会不会好记一点。
关于
clientHeight和offsetHeight当计算某个元素大小时
clientHeight | clientWidth和offsetHeight | offsetWidth在计算元素大小时区别在于clientHeight获取的大小不包括元素border值，而offsetHeight获取的大小包括border的值
document.documentElement.scrollHeight|scrollWidth获取文档大小，包括可滚动的部分。
当没有滚动条出现时获取的值和
document.documentElement.clientHeight一样。
当有滚动条出现时获取的值和document.documentElement.offsetHeight一样。
document.body.offsetHeight|offsetWidth获取body的大小offsetHeight包括body的border的值
document.body.clientHeight|clientWidth获取body的大小和offsetHeight的区别是获取的大小不包括body的border值
element.offsetTop获取元素距离页面顶部的距离
element.clientTop获取元素内容距离外层的距离，相当于是边框border的大小。
element.scrollTop获取对象最顶端和窗口中可见内容的最顶端之间的距离，也就是滚动后被隐藏的高度
event.clientX相对文档的水平座标
event.clientY相对文档的垂直座标
event.offsetX相对容器的水平坐标
event.offsetY相对容器的垂直坐标
最后找到了一个图
