BOM中的各种height
BOM中的高度属性主要涉及三块：screen、window、文档下的元素。
screen
其中screen最简单，代表着显示器的对象。
screen.height ：屏幕高度，像素为单位。
screen.availHeight :屏幕高度送去Windows系统的任务栏的高度。
从左到右，分别是Edge Chrome Firefox。因为是同一个屏幕，所以三者的结果都是相同的。
screen.width 和 screen.availWidth 类似。因为水平方向没有任务栏，所以 screen.width == screen.availWidth 。
window
这里的window代表浏览器窗口，关于高度有两个：
- innerHeight
- outerHeight
window.outerHeight : 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边和窗口调整边框。
window.innerHeight : 浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它。
关于window的宽度类似：
- window.outerWidth : 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边和调整窗口大小的边框。
- window.innerWidth : 浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。
文档下的元素
文档下的元素的高度信息主要通过clientHeight这一属性获得。
clientHeight:
返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
在下图中，element.clientHeight就是红色框内的高度。
关于文档中元素的clientHeight，我们主要关注这两个元素的：
- document.documentElement
- document.body
什么是 document.documentElement 元素呢？它代表着一个文档的根元素，如HTML文档的 <html> 元素,XML文档的根元素等等。
三者的关系
window.innerHeight document.documentElement.clientHeight 和 document.body.clientHeight 之间有什么关系呢？
window.innerHeight = document.documentElement.clientHeight +水平方向滚动条高度
Edge：因为没有水平方向滚动条，所以两者值相同
Chrome:因为有水平方向的滚动条，所以 window.innerHeight 比 document.documentElement.clientHeight 多了17px
而 document.body.clientHeight 就是body标签内的元素所占的高度（除了border和margin）。
clientHeight offsetHeight scrollHeight之间的关系
用一张图来说明，红色框中的是当前元素。
clientHeight :只有元素的内容区和padding
offsetHeight :元素的内容区 padding border margin scrollbar
scrollHeight :元素内容的实际高度，包含了溢出的部分
scrollTop :元素距离他容器顶部的像素距离
