JS三大家族

1. offset

1. offset这个词本身就是偏移、补偿、位移的意思
2. js中获取元素尺寸的办法就是offset家族
3. offset常用属性

1. 检测盒子的宽高

<1> offsetWidth：得到对象的宽度（自己的，与他人无关；没有单位；包括padding、border；不包括margin）

<2>offsetHeight：得到对象的高度（自己的，与他人无关；没有单位；包括padding、border；不包括margin）

offsetWidth = width + padding + border ;

offsetHeight = height + padding + border ;

2. 检测本盒子距离父盒子中有定位的父盒子的左/上的距离

<1> offsetLeft：返回距离上级盒子（带有定位）左边的位置，如果父级都没有定位则以body为准。包括父亲的padding，不包括父亲的border（在父盒子有定位的情况下offsetLeft == style.left去掉px）

<2>offsetTop：返回距离上级盒子（带有定位）左边的位置，如果父级都没有定位则以body为准

①offsetTop和style.top的区别

- 最大的区别在于offsetLeft可以返回没有定位的距离左侧的位置而style.top不可以

- offsetTop返回的是数字，而style.top返回的是字符串，除了数字之外还带有单位px

- offsetTop只读，style.top可读写（只读是获取值，可写是赋值）

- 如果没有给HTML元素指定过top样式，则style.top返回的是空字符串

- style.left在等号=左边和右边表示的意思不一样，在左边表示属性，在右边表示值，并且style.left只能获取行内式，如果没有就返回空字符串“”

- style.left、style.top可以赋值，而offsetLeft、offsetTop只能获取值

（3）检测父系盒子中带有定位的父盒子节点：offsetParent à 返回该对象的父级（带有定位）

<1>如果当前元素的父级元素没有进行CSS定位（position为absolute/relative/fixed），offsetParent为body

<2>如果当前元素的父级元素中有CSS定位（position为absolute/relative/fixed），offsetParent取最近的那个父级元素

4. 动画原理和封装（难点）

1. 动画原理：盒子本身的位置 + 步长

2. scroll家族

1. scrollWidth和scrollHeight（包括padding，不包括margin、border）：width是盒子的宽，height是文字内容的高（如果文字超出盒子的高，那么内容就是内容的高度而不是盒子的高度；如果文字内容没有超出盒子的高度，就是盒子的高度）

1. 检测盒子的宽高（调用者：节点元素，属性）
2. 盒子内容的宽高（如果内容超出了，显示内容的高度）

scrollWidth = width + padding

2. scrollTop和scrollLeft

1. 网页被浏览器遮挡的头部和左边部分
2. 被卷去的头部和左边部分（浏览器无法显示的左/头部）
3. 一般调用document.body.scrollTop
4. 兼容写法

document.body.scrollTop || document.documentElement.scrollTop

3. onscroll滚动事件（window.onscroll = function(){}）

1. 屏幕每滚动一次，哪怕只有1像素都会触发这个事件。这样就可以用来检测屏幕滚动
2. 只能有一个，写了多个以最后一个为准

3. client家族

1. 主要成员

1. clientWidth：获取网页可视区域宽度（两种用法）

clientHeight：获取网页可视区域高度（两种用法）

上面两种包括padding，不包括border、margin

P.S调用者不同，意义不同

    · 盒子调用：指盒子本身

    · body/html调用：可视区域大小

2. clientX：鼠标距离可视区域左侧的距离（event调用）

clientY：鼠标距离可视区域上侧的距离（event调用）

3. clientTop：得到的是盒子的上border

clientleft：得到的是盒子的左border

2. 检测浏览器的宽、高（可视区域）

1. ie9及其以上的版本

window.innerWidth/Height

2. 标准模式（有DTD）

document.documentElement.clientWidth

document.documentElement.clientHeight

3. 怪异模式（没有DTD）

document.body.clientWidth

document.body.clientHeight

4. 三大家族的区别

1. offset/scroll/client宽高

1. clientWidth = width + padding

clientHeight = height + padding

2. offsetWidth = width + padding + border

offsetHeight = height + padding + border

3. scrollWidth = 内容宽度（不包含border）

scrollHeight = 内容高度（不包含border）

2. top和left

1. offsetTop/offsetLeft

调用者：任意元素 （盒子为主）

作用：距离父系盒子中带有定位的距离

2. scrollTop/scrollLeft：盒子也可以调用，必须要有滚动条

调用者：document .body.scrollTop

作用：浏览器无法显示的部分（被卷去的部分）

3. clientY/cliemtX

调用者：event .clientX(event)

作用：鼠标距离浏览器可视区域的距离