第三大家族client

主要成员

1、clientWidth 获取网页可视区域宽度（两种用法）
clientHeight 获取网页可视区域高度（两种用法）
调用者不同，意义不同：
盒子调用： 指盒子本身。
body/html调用： 可视区域大小。
2、clientX 鼠标距离可视区域左侧距离（event调用）
clientY 鼠标距离可视区域上侧距离（event调用）
3、clientTop/clientLeft 盒子的border宽高

Width和height

clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度（不包含border）
scrollHeight = 内容高度（不包含border）

top和left

offsetTop/offsetLeft:
调用者：任意元素（盒子为主）
作用：距离父系盒子中带有定位的距离。
scrollTop/scrollLeft(盒子也可以调用，必须有滚动条)
调用者：document.body.scrollTop/....(window)
作用：浏览器无法显示的部分（被卷去的部分）
clientY/clientX(clientTop/clientLeft值的是border)
调用者：event。clientX（event）
作用：鼠标距离浏览器可视区域的距离（左、上）

client家族特殊用法之：检测浏览器宽/高度（可视区域）

Onresize事件

只要浏览器的大小改变，哪怕1像素，都会触动这个事件

事件总结

区分：
1.window.onscroll 屏幕滑动
2.window.onresize 浏览器大小变化
3.window.onload 页面加载完毕
4.div.onmousemove 鼠标在盒子上移动
（注意：不是盒子移动！！！）
5.onmouseup/onmousedown == onclick