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></stype>中写入无用，必须是行内！(操蛋！)
d.写:设置字符串,加上单位，可以是负值
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 返回数字类型
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 返回数字类型
注意事项:使用时相对父元素！
特别注意:
出于jquery的习惯，很多人习惯于写document.querySelector(...).width和document.querySelector(...).height
写法是大错特错的，在chrome，IE，firefox上将返回0，safari上返回undefined。