JavaScript中的各种X，Y，Width，Height
在JavaScript DOM编程中，会接触很多很多很多关于浏览器的宽高，屏幕的宽高，元素的各种宽高，以及鼠标的坐标等，常常让人搞混。索性就写篇博客整理一下。
case 1：鼠标的坐标
获取鼠标的坐标，首先要鼠标触发某个事件，该event事件的clientX和clientY属性就是鼠标的x，y坐标，注意此处鼠标是相对于浏览器显示区域的左上角为（0，0）来计算的。
示例：
document.documentElement.onclick = function(e){
console.log("鼠标在浏览器中的坐标为：(" + e.clientX + "px," + e.clientY +"px)")
}
case 2：显示屏的宽高
获取显示屏的宽高（此时与显示屏的内容无关，只是物理属性），可以使用screen对象，
| 属性 | 说明 |
|---|---|
| availHeight | 返回屏幕的高度（不包含标签栏，tab页） |
| availWidth | 返回屏幕的宽度（不包含标签栏，tab页） |
| height | 返回屏幕的总高度 |
| width | 返回屏幕的总宽度 |
case 3：浏览器窗口的宽高
浏览器窗口设计window对象。
window.innerheight 返回窗口的文档显示区的高度，可用高
window.innerwidth 返回窗口的文档显示区的宽度，可用宽
使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度。
case 4：border，padding，margin，width的宽度以及元素节点的宽高
对于一个div，有以下样式：
div{margin:10px; padding:10px; border:10px solid black; font-size:5px; width:20px; height:30px; }
所以在使用javascript设置element.style['attr']时，设置哪一个属性，可以从上面这个图片中描述来看。
case 5：获取整个元素的宽高（包含padding，border，以及width）
整个元素的宽高，肯定不能把margin算在内了，所以
整个元素的宽就是：style[border-left + padding-left + width + padding-right + border-right] = element.offsetWidth
整个元素的高就是 style[border-left + padding-left + width + padding-right + border-right] = element.offsetHeight
case 6：元素节点在浏览器中的位置
对于每个元素，都有offsetLeft，offsetTop属性，
element.offsetLeft返回当前元素的相对水平偏移，
element.offsetTop返回当前元素的相对垂直偏移
case 7：指定position时，上下左右的值
设置定位属性时，分别可以使用left、right、top、bottom来设置
这四个值，是相对于定位元素而言的，并不一定是浏览器的坐上角。
case 8：页面滑动的宽高
页面滑动，就必然涉及scroll，也就是说，内容的宽度或者高度超过了浏览器的宽高，那么就会出现滚动条，当
case 9：浏览器在显示器的位置
