一、概念
可视区域：元素内容区域 + padding区域，即(width+左右padding，height+上下padding)为可视区域。如下图：
文档区域：承载文档内容的区域。有滚动条的时候，我们拉动滚动条，文档区域会同时往上滚动，进入一个不可见区域。
二、鼠标事件属性
clientX：鼠标到浏览器窗口的X坐标。（浏览器可视区域左上角为坐标原点）
clientY：鼠标到浏览器窗口的Y坐标。（浏览器可视区域左上角为坐标原点）
pageX：鼠标到浏览器文档的X坐标。（文档左上角为坐标原点）
pageX：鼠标到浏览器文档的Y坐标。（文档左上角为坐标原点）
offsetX：鼠标相对于触发事件的元素的X坐标。（触发事件元素左上角为坐标原点）
offsetY：鼠标相对于触发事件的元素的Y坐标。（触发事件元素左上角为坐标原点）
如果是红框div触发了鼠标事件，则：
screenX：鼠标相对于电脑显示器的X坐标。（屏幕左上角为坐标原点）
screenY：鼠标相对于电脑显示器的Y坐标。（屏幕左上角为坐标原点）
三、元素视图属性
参照上图理解：
clientWidth： 元素可视区域宽度 = width + 左右padding
clientHeight：元素可视区域高度 = height + 上下padding
offsetWidth：元素宽度 = width + 左右padding + 左右border
offsetHeight：元素高度 = height + 上下padding + 上下border
scrollWidth：元素内容实际宽度 = clientWidth + 水平滚动条可以拉动的最大宽度 = clientWidth + scrollLeft(水平滚动条拉到最右边时）
scrollHeight：元素内容实际高度 = clientHeight + 纵向滚动条可以拉动的最大高度 = clientHeight + scrollTop(纵向滚动条拉到最下边时)
scrollLeft：元素当前水平滚动条距离元素左边的距离。
scrollTop：元素当前纵向滚动条距离元素上边的距离。
offsetParent：距离当前元素最近的一个父级定位元素，(如果没有)直至body元素。
offsetLeft：元素(border开始)到offsetParent的左侧(不包含border）的距离。
offsetTop：元素(border开始)到offsetParent的顶部(不包含border）的距离。