HTML中的坐标系及其在MouseEvent和元素Box中的应用
HTML有四个坐标系统： Screen， Page，Client和offset， 用于描述DOM元素的Box尺寸和
MouseEvent中的位置，
screen: 屏幕坐标系，(screenX，screenX), 屏幕的左上角是（0，0）， 它与窗口无关， 无论浏览器的窗口如何移动和缩放，screen坐标系的原点始终在显示屏的左上角，W和H也不变。
page: 页面坐标系，(pageX， pageY), 页面的左上角是（0，0）
client: 客户区坐标系，(clientX, clientY), local（DOM conten0074）的坐标系，
offset: 偏移坐标系(offsetX， offsetY), 相对于target node的padding Edge，他是变化最多的，因为他的基准，target node，随着鼠标的移动而不断变化。
备注： x, y: 分别是clientX和clientY坐标的别名，属于client坐标系
注意：这里面的坐标单位都是browser的坐标单位，不是显示器的物理分辨率，
例如：显示器的分辨率是， 1920 * 1200， 但是，browser的坐标只有1280*800
window object 就是 document.defaultView
其中window.outerHeight是整个window的高度，而window.innerHeight.只是browser的客户区
（viewport）的的高度， 二者相差是 browser自己占用得 title区和address bar区
在全屏模式（彻底隐藏browser的title和address bar）下，window.outerHeight === window.innerHeight === screen.height
offsetHeight, clientHeight, scrollHeight?
div元素的高度
elmnt.clientHeight： "viewable" 高度， 包括了padding, 不包括border, scrollbar or margin.
elmnt.offsetHeight：
如果元素的content长度高于元素的实际height, 此viewable height只返回 可见部分的高度
offsetHeight： viewable height， 包括了padding, border和scrollbar.
HTML中的坐标系及其在MouseEvent和元素Box中的应用
原文地址：http://www.cnblogs.com/GameEngine/p/7659181.html