JS中涉及到的宽高（三大家族）问题

1，offset

offsetLeft([value])
    获取元素距离定位父级左边的的距离，若父级都没有定位，则距离到body。

offsetTop([value])
    获取元素距离定位父级顶部的的距离，若父级都没有定位，则距离到body。

offsetWidth
    获取元素自身在浏览器的宽度(width + padding + border)

offsetHeight
    获取元素自身在浏览器的高度(height+ padding)

    
2，client

clientLeft
    获取元素自身 left 边框的宽度(border)
    
clientTop
    获取元素自身 top 边框的的高度(border)

clientWidth
    获取元素自身在浏览器的宽度(width + padding)
    
clientHeight
    获取元素自身在浏览器的高度(height + padding)

    
3，scroll

在JS中，当内容大于容器的时候，JS就可以操作scroll，通过操作容器来控制scroll，具体值视浏览器而定，但高版本浏览器一般趋于统一，为HTML的（最外层的滚动条，整个窗口的滚动条属于HTML的元素）scroll。
兼容问题：
        var scroll = 
        document.body.scrollLeft || document.documentElement.scroll

scrollLeft([val])
获取滚动条可以滚动的宽度

scrollTop([val])
获取滚动条可以滚动的高度

scrollWidth
获取可滚动的内容的宽度

scrollHeight
获取可滚动的内容的高度

4，mouse事件

offsetX
offsetY
鼠标点击的位置到当前元素border的距离，不包含border。

PageX
PageY
返回在整个文档的位置坐标，包含滚动条。

clientX
clientY
返回元素在可视区域的位置坐标。