div之各种高度篇-offsetHeight、clientHeight、scrollHeight、 offsetHeight等等

资历尚浅，真的记不住这些花里胡哨的高度宽度、但是又经常要用到，头大

以下都是自己的理解，如果有误可以提醒下谢谢~

以上图div为例子

一、offsetHeight  =  height + border + padding = 342  （返回不带px的数值）

二、clientHeight = height + padding = 340  （返回不带px的数值， 可见区域的高度）

三、scrollHeight

如上图所示，其实就是当前div的高度 + 被隐藏内容的高度（那些要拉滚动条才能看到的内容）

四、clientTop  

实际上就是当前元素的border的px， 没有设置边框就为 0

五、offsetTop  

这个要细分一下 ，分是否脱离文档流（定位）

定位的元素： 子元素上外边框开始到父元素内部边框的距离（当然包括了子元素的margin）

非定位元素： 就算子元素拥有父元素，父父元素，也是从上外边框距离整个文档顶部的距离

六、scrollTop

    没有滚动条，或者滚动条没有滚动时，为 0

   拉动滚动条，卷上去被隐藏的那个部分的高度（想象成卷帘门，被卷起来那个部分摊开后的高度）

七、window.innerheight

返回窗口的文档显示区的高度

 

隐约记得好像还有什么高度没想到，想到了在补充吧