1.offsetTop
功能:获取元素上外缘与最近的定位父元素内壁的距离，如果没有定位父元素，则是与文档上内壁的距离
使用方法:js document.querySelector(...).offsetTop 返回数字类型 只读
注解:边缘：border以外
定位父元素:position为relative，absolute或fixed
内壁：border以内
1.1 style.top
功能：与offsetTop相同
使用方法:js document.querySelector(...).style.top
区别:
a.本身得是定位元素，否则设置了也没有意义；
b.可读写；
c.读:返回字符串，如果没有给它在行内设置top属性，一律返回空字符串,经测试，在<style></style>中写入无用，必须是行内！(操蛋！)
d.写:设置字符串,加上单位，可以是负值，style.top,style.left等均可设置，不管之前有没有写入，行内还是行外均可。
2.offsetLeft
功能:获取元素左外缘与最近的定位父元素内壁的距离，如果没有定位父元素，则是与文档左内壁的距离
使用方法:js document.querySelector(...).offsetLeft 返回数字类型 只读
注解: 不存在offsetBottom或者offsetRight
2.2 style.left(类style.top)
还有style.width,style.height...特性都和style.top一样，一样操蛋。。
3.offsetWidth
功能:获取可视width+padding+border 不包括margin和外滚动条，包括内滚动条
使用方法: js document.querySelector(...).offsetWidth 返回数字类型
什么是可视区域，实际区域?
比如a元素包含b元素，b内容超长，a元素的可视区域就是现在可见的b元素区域，实际区域就是b的全部区域，注意针对的是a元素而不是b元素！对于b元素，可视区域，实际区域是一样的！
4.offsetHeight
功能:获取可视height+padding+border 不包括margin和外滚动条，包括内滚动条
使用方法: js document.querySelector(...).offsetHeight 返回数字类型
备注：JQuery有offset方法，返回的是相当于文档的距离，返回数据为对象{left: 左偏移，top: 上偏移} 偏移值为数字类型
5.clientWidth
功能:获取可视width+ padding，不包括内滚动条
使用方法:js document.querySelector(...).clientWidth 返回数字类型
5.clientHeight
功能:获取可视width+ padding，不包括内滚动条
使用方法:js document.querySelector(...).clientHeight 返回数字类型
6.scrollLeft
功能:获取左移的距离，只能为>=0的数值，越往左越大 可读可写
使用方法:js document.querySelector(...).scrollLeft 返回数字类型
注意事项:使用时相对父元素！
7.scrollTop
功能:获取上移的距离，只能为>=0的数值，越往上越大 可读可写
使用方法:js document.querySelector(...).scrollTop 返回数字类型
注意事项:使用时相对父元素！
8.scrollWidth
功能:获取实际宽度(可超出可视区域！不会比clientWidth小)，不包括内滚动条
8.scrollHeight
功能:获取实际高度(可超出可视区域！不会比clientHeigtht小)，不包括内滚动条
注意事项：
由于个人习惯，使用时总是倾向于相对子元素而非包含它的父元素，实际上恰恰相反！
在横向出现滚动条的情况下(内部出现,这时不同浏览器对滚动条的处理不同数值会有差异，比如IE，clientWidth会减小，有些不变！width才是实际宽度)
所以大小关系为clientWidth<= width<=offsetWidth，scrollWidth有时最大
特别注意:
出于jquery的习惯，很多人习惯于写document.querySelector(...).width和document.querySelector(...).height
写法是大错特错的，在chrome，IE，firefox上将返回0，safari上返回undefined。