相关属性介绍
都要结合鼠标事件监听使用
1、client相关属性
获取鼠标位置
鼠标相对于视口的位置
e.clientX e.clientY （e是鼠标对象）
获取节点尺寸
节点.clientWidth; 节点.clientHeight;（返回值为数值）
clientWidth = content宽度 + 左padding + 右padding（即：实际尺寸 不含border和margin，不论是什么盒模型）
clientHeight = content高度 + 左padding + 右padding （即：实际尺寸 不含border和margin，不论是什么盒模型）
获取边框宽度
clientTop = 上边框的宽度
clientLeft = 左边框的宽度
2、offset相关属性
获取鼠标位置
鼠标相对于事件源的位置
e.offsetX e.offsetY （如果鼠标事件为mousemove，则移到子节点时变成相对于子节点的位置）
获取节点尺寸
节点.offsetWidth; 节点.offsetHeight;（返回值为数值）
offsetWidth = content宽度 + 左padding + 右padding + 左boder + 右boder
offsetHeight = content高度 + 左padding + 右padding + 左boder + 右boder
offsetTop：当前节点的 上边框外边缘 到最近的已定位父级（offsetParent） 上边框内边缘 的距离。
offsetLeft：当前元素 左边框外边缘 到最近的已定位父级（offsetParent） 左边框内边缘 的距离。
offsetParent：获取离当前元素最近的已定位父级（即：position有以下属性值之一：relative absolute fixed），如果父级都没有定位，则获取的为body节点
区别
clientX/clientY 的位置是鼠标相对于整个视口的左上角的位置
offsetX/offsetY 的位置是鼠标相对于事件源（即鼠标所停留在的那个节点）的左上角的位置
clientWidth/clientHeight 的尺寸是节点不包含border宽度和margin的尺寸，不论是什么盒模型都不包含
offsetWidth/offsetHeight 的尺寸是节点不包含margin的尺寸
区别图如下
