JS—三大家族

OFFSEt系列

offset:返回为数字，最近带有定位的祖先元素：son.offsetParent;如果没有则为body

    -offsetTop      返回元素距离带有定位的父级元素的上方的偏移量；假如没有定位的父级，则offsetTop返回距离body上方的偏移

    -offsetLeft    

    定位生效：position：relative;或者absolute

    偏移：margin+padding,不包含border

    获取最近的带有定位的祖先元素：son.offsetParent；如果没有，则结果为body.

====对应offsetWidth   offsetHeight

不支持设置，只能获取，并且支持行内及其他方式设置   

    son.offsetWidth         :width+padding*2+border*2

    son.offsetHeight        :height+padding*2+border*2

区别：son.style.width:只支持获取行内样式；son.parentNode:一定是上一级父元素！

offsetWidth：无单位；行内式，内嵌式或者文件均支持获取；包含padding，border，内容宽；只能获取，设置无效

style.width:有单位；只是内容宽，不包含border,padding;可获取，也可设置   

应用

cursor:move

    // pageX,clientX都可以

    box.addEventListener('mousemove',function(e){

        var x = e.pageX-this.offsetLeft;

        var y = e.pageY-this.offsetTop;

    });

z-index:元素覆盖现象，值越大，处于位置越高。

client

box.clientLeft:左边框

    box.clientTop:上边框

    无下边框与有边框属性

    // 不包含border;支持：内容宽高+padding

    box.clientWidth:

    box.clientHeight

SCROLL系列

    scrollWidth         自身实际的宽度，不包含border

    scrollHeight        自身实际高度，不包含border

    -addEventListener()     removeEventListener()

        鼠标按下事件    mousedown

        鼠标移动事件    mousemove

        鼠标松手事件    mouseup     清除移动事件

标签：box,大家族,son,padding,获取,JS,border,边框
来源： https://www.cnblogs.com/macro-renzhansheng/p/13021779.html