JavaScript 三大家族区别(offset/scroll/client)

一、三大家族区别（三大家族总结）
（1）Width和height
clientWidth  = width  + padding   (盒子调用)
clientHeight = height + padding
offsetWidth  = width  + padding + border   (盒子调用)
offsetHeight  = height + padding + border
scrollWidth   = 盒子(div)中(文本)内容宽度（不包含border）      (盒子调用)
scrollHeight  = 盒子(div)中(文本)内容高度（不包含border）
（2）top和left
1. offsetTop/offsetLeft ：在带有定位属性的父系盒子中的距离。调用者：任意元素。(盒子为主)
2. scrollTop/scrollLeft: 浏览器无法显示的部分（被卷去部分的大小）。(盒子也可以调用，必须有滚动条) 调用者：document.body.scrollTop/.....(window)
3. clientTop/clientLeft 指的是(上、左)border的宽度(粗细)    (盒子调用)


二、event事件的属性
clientY/clientX:  鼠标在浏览器可视区域的位置。   调用者：event      event.clientX
pageX/pageY:  鼠标在整个页面中的位置          调用者：event 
screenX/screenY:  鼠标在屏幕(显示器)中的位置     调用者：event 


获得屏幕(显示器)宽高:  window.screen.width