三大家族（offset、scroll、client）

offset家族
1、offset家族简介
offset这个单词本身是–偏移，补偿，位移的意思。
js中有一套方便的获取元素尺寸的办法就是offset家族。
offset家族成员：
offsetWidth
offsetHeight
offsetTop
offsetLeft
offsetParent
1、1offsetWidth和offsetHeight（检测盒子自身宽高+psdding+border）这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能获取元素节点的宽和高。
offset宽/高 = 盒子自身的宽/高 +padding+border；
offsetWidth = width+padding+border；
offsetHeight=height+padding+border；
1、2offsetLeft和offsetTop（检测距离父盒子有定位的左/上面的距离）
返回距离上级盒子（带有定位）左边的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding开始算，父亲的border不算。
在父盒子有定位的情况下，offsetLeft==style。left（去掉px）
offsetTop：获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置
1、3offsetParent（检测父盒子中带有定位的父盒子节点）
1、3、1 返回该对象的父级（带有定位）
如果当前元素的父级元素没有进行CSS定位（position为absolute或relative，fixed），offsetParent取最近的那个父级元素。
1、4 offsetLeft和style.left的区别
（1）最大区别在于offsetLeft可以返回没有盒子定位的距离左侧的位置。而style.left不可以
（2）offsetLeft返回的是数字，而style.left返回的是字符串，除了数字外带有单位：px。
（3）offsetLeft只读，而style.left可读写。（只读是获取值，可写是赋值）
（4）如果没有给HTML元素指定left样式，则style.left返回的是空字符串。
style.left在=的左边是属性，在右边是值。
scroll家族
1、scroll:是–卷页，卷曲的意思 (被卷曲了多少)
scrollWidth和scrollHeight不包括border和margin
scrollWidth = width + padding;
不包括 border和margin;
2、高度特点：如果文字超出了盒子，高度为超出盒子的内容的高。不超出是盒子本身高度
3、如果这个属性存在，那么返回值应该是0-无穷大
如果没有返回值是undefined；
只要判断不是undefined就可以调用此方法

client家族
client 可视区、客户端
1、clientWidth和clientHeight 包括内容区和内边距，不包括边框
2、clientTop和clientLeft 几乎不用，因为滚动条不会在顶部和左侧