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

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

 

六、scrollHeight、scrollWidth

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

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