简单理解clientHeight、scrollHeight、offsetHeight

一、 clientWidth和clientHeight

1.     clientWidth：获取实际宽度，结果为数值型

2.     clientHeight：获取实际高度，结果为数值型

3.     clientWidth和clientHeight的注意事项

1)    padding会影响这个属性的值，即clientHeight= height+padding（上下），clientWidth=width+padding（左右）

2)    滚动条会影响这个属性的值，即clientHeight = height-滚动条宽度；clientWidth=width-滚动条宽度

二、 scrollWidth和scrollHeight

1.     scrollWidth：元素的实际宽度

2.     scrollHeight：元素的实际高度

3.     注意：这两个属性可以用来测算出溢出元素的实际宽度和高度

三、 offsetWidth和offsetHeight

1.     offsetWidth：元素的实际宽度

2.     offsetHeight：元素的实际高度

3.     注意：

1)    offsetWidth和offsetHeight受padding和border影响，也就是说

offsetWidth= width+padding+border

offsetHeight= height+padding+border

四、 什么时候使用clientWidth、clientHeight、offsetWidth、offsetHeight

1.     如果要计算的实际的宽度和高度用clientWidth、clientHeight

2.     如果要计算页面中某个元素的实际宽度和高度用offsetWidth、offsetHeight

五、 获取页面的实际宽度和高度的方法（可视宽度和高度）(document.documentElement是代表从html开始的根节点，document.body是指body元素节点)

var w = document.body.clientWidth || document.documentElement.clientWidth(注意，前提是要先设置*{margin：0；padding：0；”})

var h =document.documentElement.clientHeight  （这里需要注意高度的获取是通过从根节点元素开始的，所以只能写documen.documentElement）

六、 clientLeft：获取的是元素左边框的宽度

七、 clientTop：获取的是元素上边框的宽度

八、 offsetParent：作用是获取某元素的参照

1.     如果该元素没有祖先元素，那么它的结果为body

2.     如果该元素有祖先元素，但是祖先元素没有定位，那么它的结果为body

3.     如果该元素有祖先元素，且祖先元素有定位，那么，它的结果为离它最近的且具有定位属性的祖先元素

九、 offsetTop：获取元素距离参照物顶端的距离

十、 offsetLeft：获取元素距离参照物左侧的距离

十一、 scrollTop：获取或设置容器顶端到内容顶端的距离，可读可写

十二、 scrollLeft：获取或设置容器左端到内容左端的距离，可读可写

十三、 上面的所有属性的结果都为Number类型