js中的三大家族

offset家族

offset家族:可以获取自身元素尺寸的一套方法。

==1.offsetWidth和offsetHeight== （得到的是自己的宽度和高度，与别人无关）

计算公式：
offsetWidth = width + border + padding

==2.offsetLeft 和offsetTop== （返回距离父级盒子（最近的带有定位）的左边和上边的位置。

注意：如果父级都没有定位则以body 为准

==3.offsetParent==（返回该对象的父级（带有定位的））

offsetParent与parentNode有所区别：如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

parentNode是返回父亲元素。

4.offsetTop 与 style.top 的区别

一.offsetTop 可以返回没有定位的盒子距离顶部的位置，而style.top是只有定位的盒子才有top，left值。

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

三.offsetTop 只读，而 style.top 可读写。

四. 最重要的区别是style.Top 只能得到 行内样式 offsetLeft 随便都可以获得。

---

scroll家族

scroll:滚动的，

==1.scrollTop 和 scrollLeft==

以scrollTop 为例，scrollTop 是指被卷去的头部 的距离，也就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离

2.得到scrollTop 的方式在各个浏览器会有所不同，目前有个兼容的写法，可以通过下面的写法获得scrollTop 而不比担心所使用的是哪个浏览器：

   var scrollTop = window.pageYOffset || document.documentElement.scrollTop
          || document.body.scrollTop || 0;

---

client 家族

client：可视区域；

注意区分：
offsetWidth: width + padding + border

==clientWidth==： width + padding

scrollWidth: 大小是内容的大小