offset家族

三大家族和一个事件对象

三大家族（offset/scorll/client）
事件对象/event(事件被触动时，鼠标和键盘的状态)（通过属性控制）

Offset家族简介

offset这个单词本身是--偏移，补偿，位移的意思。
js中有一套方便的获取元素尺寸的办法就是offset家族；
offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
共同组成了offset家族。

offsetWidth和offsetHight(检测盒子 自身宽高+padding+border)

这两个属性，他们绑定在了所有的节点元素上，获取之后，只要调用这两个属性，我们就能获取元素节点的宽和高。
offset 宽/高=盒子自身的宽/高 +padding+border；
offsetWidth = width+padding+border；
offsetHeight = Height+padding+border；

offsetLeft和offsetTop(检测距离父盒子有定位的左/上面的距离)

返回距离上级盒子（带有定位）左边s的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下，offsetLeft == style.left(去掉px)

offsetParent(检测父系盒子中带有定位的父盒子节点)

1、返回改对象的父级（带有定位）
如果当前元素的父级元素没有进行CSS定位（position为absolute或relative,fixed ）,offsetParent为body。
2、如果当前元素的父级元素中有CSS定位（position为absolute或relative,fixed）,offsetParent取最近的那个父级元素。

offsetLeft和style.left区别

一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
而 style.left不可以
二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。

style.left在=的左边和右边还不一样。（左边的时候是属性，右边的时候是值）