JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth，clientTop和clientLeft等区别

一、clientWidth和clientHeigh 、 clientTop和clientLeft

clientWidth和clientHeight
下面div代表的是元素
console.log(div.clientWidth,div.clientHeight);
上面获取到的宽高是：width+padding
如果有滚动条时会是：width+padding-17（滚动条宽高）
clientTop: 上边框的厚度。
clientLeft: 左边框的厚度。

二、offsetWidth和offsetHight 、offsetTop和offsetLeft
offsetWidth和offsetHeight
下面div代表的是元素
console.log(div.offsetWidth,div.offsetHeight);
上面获取到的宽高是：width+padding+border也就是这个元素的实际占位宽高（加上边框）
offsetTop: 当前元素上边框外边缘到最近的已定位父级（offsetParent）上边框内边缘的距离。如果父级都没有定位，则分别是到body顶部的距离。
offsetLeft: 当前元素左边框边缘到最近的已定位父级（offsetParent）左边框内边缘的距离。如果父级都没有定位，则分别是到body左边的距离。

三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft
scrollWidth和scrollHeight
下面div代表的是元素
console.log(div.scrollWidth,div.scrollHeight);
上面获取到的宽高是：width+padding
如果有滚动条时会是：因为内容宽度不同，实际内容宽度+padding
scrollTop: 内容层顶部到可视区域顶部的距离(被隐藏区域宽度)。
scrollLeft: 内容层左边到可视区域左边的距离(被隐藏区域宽度)。