Javascript中宽高和偏移

原生JavaScript

clientHeight/Width:

Element.clientHeight==>元素包括padding的高度，不包括滚动条
Element.clientWidth==>元素包括padding的宽度，不包括滚动条
document.body/documentElement.clientWidth/Height==>:代表视口的宽高

scrollHeight/With:

Element.scrollHeight/With==>元素内容包括可滚动的宽高
document.body/documentElement.scrollHeight/Width==>文档的宽高

scrollTop/Left:

Element.scrollTop/Left==>元素滚动条的位置
document.doby/documentElement.scrollTop/Left==>文档滚动条的位置

原生JavaScript只能获取元素相对于最近定位祖先元素(offsetParent)的偏移：

Element.offsetTop/Left

getBoundingClientRects()方法

该返回元素的大小及相对于视口的位置
大小的含义：包含border+padding+content的大小
位置的含义：top，left包含margin；bottom,right不包含margin(不明白可以测试一下)

jQuery中关于宽高和偏移：

宽高：

height(),width()==>获取元素的内容的宽高值，
				  $(window).height():返回视口的高度
				  $(document).height():返回文档的高度
innerHeight(),innerWidth()==>获取元素包括padding的宽高值，不适用于window和document
outerHeight(),outerWidth()==>获取元素包括Margin的宽高值，不适用于window和document

偏移：

position()==>获取相对于最近定位祖先元素的偏移（返回一个包括left、top属性的对象）
offset()==>获取相对于文档的偏移（返回一个包括left、top属性的对象）
scrollLeft()==>获取元素水平滚动条的位置
scrollTop()==>获取元素垂直滚动条的位置