JavaScript：所有视图属性和方法（innerWidth、outerHeight、clientX等）
本文只是总结了各个视图属性的含义，其中⭐处建议背下来，至于兼容性也是非常重要的，具体可以看文末链接。
本文内容分为五大部分：
1.Window视图属性
- innerHeight 和 innerWidth
- outerHeight 和 outerWidth
- pageXOffset 和 pageYOffset
- screenX 和 screenY
2.Screen视图属性
- availWidth 和a vailHeight
- colorDepth
- pixelDepth
- width 和 height
3.文档视图(DocumentView)和元素视图(ElementView)方法
- document.elementFromPoint()
- element.getBoundingClientRect()⭐滑动栏滚动的时候常用
- document.getClientRects()
- element.scrollIntoView()
4.元素视图属性
- clientHeight 和 clientWidth
- clientLeft 和 clientTop
- offsetWidth 和 offsetHeight
- offsetLeft 和 offsetTop
- offsetParent
- scrollHeight 和 scrollWidth
- scrollLeft 和 scrollTop
- scrollLeftMax 和 scrollTopMa
5.鼠标位置
- clientX 和 clientY
- offsetX 和 offsetY
- pageX 和 pageY
- screenX 和 screenY
- x 和 y
⭐一、window视图属性
1.innerWidth 属性和 innerHeight 属性：表示获取window窗体的内部宽度和高度，不包括用户界面元素，比如窗框。
2.outerWidth属性和outerHeight属性：表示整个浏览器窗体的大小，包括任务栏等。
3. pageXOffset和pageYOffset：表示整个页面滚动的像素值（水平方向的和垂直方向的）。
4.screenX and screenY：浏览器窗口在显示器中的位置，screenX表示水平位置，screenY表示垂直位置。
二、Screen视图属性
- availWidth和availHeight：显示器可用宽高，不包括任务栏之类的东东。
- colorDepth：表示显示器的颜色深度。
- pixelDepth：该属性基本上与colorDepth一样。
- width和height：表示显示器屏幕的宽高。包括任务栏。
三、文档视图(DocumentView)和元素视图(ElementView)方法
- elementFromPoint()：返回给定坐标处所在的元素。
- getBoundingClientRect()：得到矩形元素的界线，返回的是一个对象，包含 top, left, right, 和 bottom四个属性值，大小都是相对于文档视图左上角计算而来。
- getClientRects()：返回元素的数个矩形区域，返回的结果是个对象列表，具有数组特性。
- scrollIntoView()：让元素滚动到可视区域（不属于草案方法）。
⭐四、元素视图属性
1.clientLeft和clientTop：表示内容区域的左上角相对于整个元素左上角的位置（包括边框）。
2.clientWidth和clientHeight：表示内容区域的高度和宽度，包括padding大小，但是不包括边框和滚动条。
3. offsetLeft和offsetTop：表示相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值。
4.offsetParent：第一个祖定位元素（即用来计算上面的offsetLeft和offsetTop的元素）
5. offsetWidth和offsetHeight：整个元素的尺寸（包括边框）。
6. scrollLeft和scrollTop：表示元素滚动的像素大小。可读可写。
7.scrollWidth和scrollHeight：表示整个内容区域的宽高，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候，scrollHeight应该等用于scrollTop + clientHeight。
⭐五、鼠标位置(Mouse position)
- clientX,clientY：相对于window，为鼠标相对于window的偏移。
- offsetX, offsetY：表示鼠标相对于当前被点击元素padding box的左上偏移值。
- pageX, pageY：为鼠标相对于document的坐标。IE6~IE8浏览器是不支持的。
- screenX, screenY：鼠标相对于显示器屏幕的偏移坐标。
- x, y：相当于clientX/clientY。既然已经有了clientX/clientY，为什么还需要x, y呢？莫非是为了少写几个字母？谁知道呢！
