前端各种宽高，收集于多处
offsetLeft:
只读属性，返回当前元素左上角相对于（HTMLElement.offsetParent）节点的左边界偏移的像素值（不包括元素的边框和父容器的边框）。
offsetTop:
只读属性，返回当前元素相对于其（HTMLElement.offsetParent）元素的顶部的距离（不包括元素的边框和父容器的边框）。
offsetWidth:
只读属性，返回一个元素的布局宽度，包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。
offsetHeight:
只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距、边框和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。
HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
clientWidth:
只读属性，元素内尺寸宽度，包含 内容+内边距 大小，不包括边框、外边距、滚动条部分。
clientHeight:
只读属性，元素内尺寸高度，包含 内容+内边距 大小，不包括边框、外边距、滚动条部分。
clientLeft:
只读属性，元素的内边距的外边缘和边框的外边缘的距离，实际就是边框的左边框宽度。
clientTop:
只读属性，元素的内边距的外边缘和边框的外边缘的距离，即边框的上边框宽度。
scrollWidth:
对象的实际内容的宽，包含内部元素的被滚动条隐藏的部分，即页面上包含滚动条卷去的总宽度。
scrollHeight:
网页内容实际高度，包含内部元素的被滚动条隐藏的部分，即页面上包含滚动条卷去的总高度。
scrollLeft:
可以读取或设置元素滚动条到元素左边的距离，即滚动条左边卷去的宽度。
scrollTop:
可以获取或设置一个元素的顶部到它的最顶部可见内容（的顶部）的距离，即滚动条上方卷去的高度。
ps：
style.left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距。同offsetLeft是相同的，区别在于：
1. style.left 返回的是字符串，如 20px，offsetLeft返回的是数值 20，如果需要对取得的值进行计算。
2. style.left 是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。
3. style.left 的值需要事先定义，否则取到的值为空。而且必须要定义在html里，如果定义在css里，style.left的值仍然为空。offsetLeft 则仍然能够取到，无需事先定义div的位置
event 相关：
clientX、clientY：相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这两个属性。
pageX、pageY：类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这两个属性不是标准属性，但得到了广泛支持。IE事件中没有这两个属性。
offsetX、offsetY：相对于事件源元素（target或srcElement）的X,Y坐标，只有IE事件有这两个属性，标准事件没有对应的属性。
screenX、screenY：相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这两个属性。