CSS常用的属性offsetHeight、offsetTop、clientY、offsetY、scrollTOp、scrollHeight、clientWidth

一、offsetHeight / offsetWidth


    
    

结论:

1、在content-box下:offsetWidth / offsetHeight = width / height + padding + border

2、在border-box下:offsetWidth / offsetHeight = width / height

二 、offsetTop、offsetLeft


    

    

结论:

1、offsetTop / offsetLeft 是只读属性并且只受祖先元素中有定位属性的元素影响,position:relative | absolute | fixed | sticky可以是其中的任意一个(亲测可行)

2、实际上计算的是元素border(不包含border)到父元素boeder之间的距离(不包含border)即:offsetTop / offsetLeft = 父元素 padding (内边距)+  元素 margin  (只有这两个属性影响该值)

三、clientX、clientY、offsetX、offsetY 


    
    

 结论:

1、clientX、clientY是相对于客户端的位置,offfsetX、offsetY是相对于容器的位置

2、在做动画的时候这四个属性很重要

四、clientHeight、clientWidth、clientTop、clientLeft


    
    

结论:

在conten-box时:clientHeight = height + padding

在border-box时:clientHeight = height - border

思考:显然border并不是内容区的组成部分而padding是,我们可以设置border-color,但并不能设置padding-color,从设置bg就可以看出来。

clientTop、clientLeft指元素相对于游览器边框的距离

五、scrollTop、scrollLeft

CSS常用的属性offsetHeight、offsetTop、clientY、offsetY、scrollTOp、scrollHeight、clientWidth_第1张图片

结论:scrollTop是y轴方向内容溢出的部分,scrollLeft是再x轴方向内容溢出的部分

 

六、scrollHeight、scrollWidth

结论:指再y轴或x轴滚动条的长度

滚动条到底公式:element.scrollHeight - element.scrollTop - element.clientHeight < 1

你可能感兴趣的:(css,前端,javascript)