三大家族，offset,scroll,client

1.client

1.1主要成员

　　1.clientWidth 获取网页可视区域宽度（两种用法）

　　   clientHeight 获取网页可视区域高度 （两张用法）

　　

　　盒子调用： 指盒子本省

　　浏览器调用：可视区域大小。

　　2.clientX  鼠标距离可视区域左侧的距离（event调用）

　　　clientY 鼠标距离可视区域上侧的距离（event 调用）

2.三大家族的区别

2.1Width 和 Height

clientWidth = width +padding

clientheight = height+ padding

offsetWidth = width + padding +border

offsetHeight = height + padding + border

scrollWidth = 内容宽度（不包含border）

scrollHeight = 内容高度（不包含border）

2.2top和left

offsetTop/offsetLeft ：

调用者：任意元素。(盒子为主)

嘛作用：距离父系盒子中带有定位的距离。

scrollTop/scrollLeft:

调用者：document.body.scrollTop/.....(window)

嘛作用：浏览器无法显示的部分（被卷去的部分）。

clientY/clientX:

调用者：event.clientX(event)

嘛作用：鼠标距离浏览器可视区域的距离（左、上）。