clientWidth、offsetHeight、scrollTop、clientX区分

宽高width/height

• width：对象的内容宽度（element.style.width）
• clientWidth：对象内容的可视区的宽度，content+左右padding，会随对象显示大小的变化而改变（element.clientWidth）
• offsetWidth：对象整体的实际宽度，content+左右padding+左右border，会随对象显示大小的变化而改变（element.offsetWidth）
• scrollWidth：对象的实际内容的宽度，content+左右padding，会随对象中内容超过可视区后而变大（element.scrollWidth）
• window.innerWidth：浏览器窗口的内部宽度

坐标

• clientTop：到上边框外边缘的距离，border的宽度（element.clientTop）
• clientLeft：到左边框外边缘的距离，border的宽度（element.clientLeft）
• offsetTop：当前元素上边框外边缘到最近的已定位父级（offsetParent）上边框内边缘的距离。如果父级都没有定位，则是到body顶部的距离。（element.offsetTop）
• offsetLeft：当前元素左边框外边缘到最近的已定位父级（offsetParent）左边框内边缘的距离。如果父级都没有定位，则是到body左边的距离。（element.offsetLeft）
• scrollTop：滚动产生滚动条后，内容层顶部到可视区域顶部的距离，只有取外层元素（产生滚动条的元素）的scrollTop才能取到值，内层元素scrollTop始终为0.（document.documentElement.clientTop）
• scrollLeft：滚动产生滚动条后，内容层左部到可视区域左部的距离，只有取外层元素（产生滚动条的元素）的scrollLeft才能取到值，内层元素scrollLeft始终为0.（document.documentElement.clientLeft）
• clientX：鼠标位置相对于可视区域的X轴的位置，不包含滚动条的区域的部分。就算是页面进行了滚动，鼠标的坐标值还是参考可视区域。(event.clientX)
• clientY：鼠标位置相对于可视区域的Y轴的位置，不包含滚动条的区域的部分。就算是页面进行了滚动，鼠标的坐标值还是参考可视区域。(event.clientY)