####offset家族

三大家族和一个事件对象

三大家族（offset/scroll/client）

事件对象/event （事件被触动时，鼠标和键盘的状态）（通过属性控制）

Offset家族简介

offset这个单词本身是–偏移，补偿，位移的意思。

js中有一套方便的获取元素尺寸的办法就是offset家族。

offsetWidth和offsetHight以及offsetLeft和offsetTop以及offsetParent 共同组成了offset家族。

1. offsetWidth和offsetHight （检测盒子自身宽高+padding+border）Number类型 这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。 offset宽/高 = 盒子自身的宽/高 + padding +border；
2. offsetLeft和offsetTop （检测距离有定位的父盒子左/上面的距离）
   • 如果父级都没有定位以body为准 offsetLeft 从父亲的padding 开始算,父亲的border 不算。
   • 在父盒子有定位的情况下，offsetLeft+’px’ == style.left
3. offsetParent （检测父系盒子中带有定位的父盒子节点），返回该对象带有定位的父级
   • 如果当前元素的父级元素没有进行CSS定位(position为absolute或relative，fixed）， offsetParent为body。
   • 如果当前元素的父级元素中有CSS定位(position为absolute或relative，fixed)， offsetParent是最近的父级元素。
4. offsetLeft和style.left区别
   • 最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置；style.left不可以,并且只能获取行内式，如果没有返回“”。
   • offsetTop 返回的是数字；而 style.top 返回的是字符串，除了数字外还带有单位：px。
   • offsetTop 只读；而 style.top 可读写。（只读是获取值，可写是赋值）
   • 如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。

动画和封装

闪现、匀速、缓动

案例

无缝滚动