javascript 三大特性，offset、client、scroll。

offsetwidth : border + padding + 内容
offsetHright： border + padding + 内容
offsetLeft：   盒子到最近定位父元素的距离
offsetTop： 盒子到最近定位父元素的距离


cline 系列，在事件对象 e.clineX......是翻译成可视区。但是针对某个元素 ，即便已经滚到页面以上，看不见的地方。
         它的clineTop 依旧是原值不变！
clientTop：  border-top
clientLeft： border - left
clientHeight： padding  + 内容（不包括边框）
clientWidth：  padding  + 内容（不包括边框）

scrollLeft：    滚出盒子的内容+paddin 以外的内容的大小
scrollTop：  滚出盒子的内容+paddin 以外的内容的大小
scrollWidth：  内容的宽 padding + 内容 不包括滚动条
scrollHeight： 内容的高 包括在盒子外的 内容 
如果 scorll 设置overfllow - hidden。那么他就和 clientheight/width 一样！