js中各种宽度和高度的计算方法

1.offsetwidth/offsetHeight  获取文档的实际宽高 不计算滚动条 但是计算元素的占位大小

 offsetWidth = padding(左、右) + width + border(左、右)

offsetHeight = padding(上、下) + height + border(上、下)

2.offsetTop/offsetLeft  获取元素到定位父级的距离（非定位值），但是不包括定位父级的border线 ；如果父级没有定位则是到body的顶部/左边的距离

3.offset家族图谱

4.innerWidth/innerHeight  获取窗口的宽度和高度   出现滚动条时也是计算在内的，窗口指的是window，所以一般时window.innerWidth/innerHeight。

5.clientWidth/clientHeight 获取文档的可视区宽高，不计算滚动条,不计算border线，文档一般指的是documet.documentElement(html).clientWidth/clientHeight,但是也可以用在一般元素上

clientWidth = padding(左、右) + width

clientHeight = padding(上、下) + height

6.scrollWidth/scrollHeight 计算元素的滚动宽高，会计算溢出部分（内容的大小），不包括border线，但是当元素加上overflow:scroll之后，将会重新计算大小，此时会把padding计算在内。

7.scrollTop/scrollLeft 被卷去的头部和左边

8.getBoundingClientRect

width 元素的实际占位宽度

heigth 元素的实际占位高度

top 元素上边到视口顶部的距离

bottom 元素的底部到视口顶部的距离

right 元素右边到视口左边的距离

left 元素左边到视口左边的距离

x 元素x轴的距离

y 元素y轴的距离

9.scrollIntoView

参数为true  元素的顶部与页面顶部对齐

参数为false 元素底部与页面底部对齐