我们知道红楼梦中 有四大家族
在JS当中也有几大家族 现在介绍一下offset家族
offset的作用
方便获取元素尺寸
offsetWidth offsetHeight
得到对象的宽度和高度(自己的，与他人无关)
offsetWidth: width + border + padding
div {
width:220px;
border-left:2px solid red;
padding:10px;
}
div的.offsetWidth = 220 + 2(只有左边框) + 20
注意:为什么不用 div.style.width
因为它只能得到行内的数值
offsetLeft offsetTop
如果父级都没有定位则以body 为准
这里的父级指的是所有上一级 不仅仅指的是 父亲 还可以是 爷爷 曾爷爷 曾曾爷爷。。。。
offsetLeft 从父级的padding 开始算 父亲的border 不算
总结一下： 就是子盒子到定位的父盒子边框到边框的距离
offsetParent
返回该对象的（带有定位）父级 不一定是亲的爸爸
它和 parentNode 这个返回亲父亲 不管父亲是否带有定位 有所区别
- 如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），
offsetParent为body。 - 如果当前元素的父级元素中有CSS定位（position为absolute或relative），
offsetParent取最近的那个父级元素。
offsetTop style.top 以及 offsetLeft和style.left 的区别
offsetLeft可以返回没有定位盒子的距离左侧的位置。 而style.top不可以 只有定位的盒子 才有 left top rightoffsetTop返回的是数字，而style.top返回的是字符串，除了数字外还带有单位：px。
style.left = 300px parseInt（300px）
结果 300
parseInt（style.left） + parseInt（style.left）offsetTop只读，而style.top可读写。如果没有给 HTML 元素指定过
top样式，则style.top返回的是空字符串。最重要的区别
style.left只能得到 行内样式 而offsetLeft 则都可以获取到
