offsetHeight、scrollHeight、clientHeight、height

对这几项进行彻底研究。

第一步：纯净div，没有margin，padding,border，height设置为200px。

添加滚动条，overflow:scroll，结果div的高度被压缩，因为被滚动条占用17px（滚动条的高度为17px）。

加入滚动条前：

• scrollHeight=200px
• offsetHeight=200px

加入滚动条后：

• scrollHeight=183px=（内容高度200px-滚动条17px）  （说明scrollHeight已经不包括滚动条的高度）
• offsetHeight=200px

第二步：将div加上20px的padding

加上padding之后：

• scrollHeight=(内容高度200px+上下padding40px-滚动条17px)=223px（说明scrollheight包括padding，不包括下滚动条的高度。
  结论：滚动高度可以理解为和滚动条平行的那段距离，显然，border和margin都不和滚动条平行，所以，border和margin都不算在滚动高度内）
• offsetHeight=200px+上下padding=240px  (说明offsetHeight就是整个div的最终高度）
  结论：offsetHeight直观理解是眼睛能看的到的整个高度，包括（如果有的话）：滚动条+内容+padding+border，margin不可见，所以不算在内）

内容超长的情形：

• scrollHeight的值就为内容展平的高度+padding，可以想像成内容展平的高度。

结论：

• scrollHeight=内容高度 + （上下）padding - 底部滚动条17px（如果有）（可变）
• offsetHeight=整个可见高度（固定）
• clientHeight=可见内容高度+(上下)padding（固定）