JS的三大系列

一. offset系列

1.offsetWidth和offsetHeight

• 可以检测盒子的宽高，没有单位，是number类型；
• 包括盒子宽高本身、padding、border；
• offsetHeight = height + padding + border；（不包括margin）；
• offsetWidth = width + padding + border；（不包括margin）；

2.offsetLeft和offsetTop（检测距离有定位的父系盒子左/上的距离）

• 返回距离上级盒子(带有定位)左边/上面的距离；
• 没有脱离文档流----->父级的margin-left+父级的border-left+父级的padding-left+当前元素的margin-left
• 脱离文档流---->left+margin-left

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

• 返回该对象的父级（带有定位），如果父系盒子中都没有进行CSS定位（position为absolute、relative或fixed），offsetParent为body；
• 如果当前元素的父级有CSS定位，就返回最近的那个父级元素；
• 除了static之外的其它定位。

二. scroll系列

1. ScrollWidth和scrollHeight（不包括border）

• 检测盒子的宽高：节点元素.属性，内容没有超出盒子时，值为盒子宽高；

• 盒子内容的宽高：如果有内容超出盒子高度，显示内容的高度

2. scrollTop和scrollLeft

• 被卷去的头部和左边部分。

三. client系列

• clientWidth：获取网页可视区域宽度；
• clientHeight：获取网页可视区域高度，调用者不同，意义不同：

盒子调用：指盒子本身（不包括border，clientWidth = padding + width）；
body/html调用：可视区域大小。

• clientX：鼠标距离可视区域左侧距离（event调用）；
• clientY：鼠标距离可视区域上侧距离（event调用）；
• clientTop/clientLeft：盒子的border宽高