一个例子教你彻底搞懂元素节点的宽、高、滚动距离等属性问题

前端项目中经常会使用DOM元素的offsetHeight、offsetWidth、scrollHeight、scrollWidth、scrollTop、clientHeight、clientWidth等值, 对于基础薄弱的初学者来说，经常弄混，接下来使用一个图来解释一下:

Paste_Image.png

它们的数值关系如下:

1. offsetHeight = clientHeight + border的高度
2. offsetWidth = clientWidth + border的宽度
3. scrollHeight = clientHeight + scrollHeight

项目中还会用到IE盒模型和标准盒模型，两者的数值关系为:
IE 盒模型的宽度 = 标准盒模型的宽度+padding值+border值
IE 盒模型的高度 = 标准盒模型的高度+padding值+border值
标准盒模型的元素可以使用box-sizing:borde-box转换为IE盒模型。