offset是什么，算什么？凭什么让我们这么辛苦的看望你，了解你，真的是搞笑，呵呵哒。
第一集：今天为什么这么无聊，要来开电脑，因为爱情？哎不说了，想想就要拿一卷卫生纸，你们先看着吧，我拿卫生纸其去了。未完待续。。。
其实实吧，是自己未出道之前，受恩师指导，现在很是怀念昔日的修炼时光，就在上一秒，翻出来看看，回忆 回忆，悟出一些道理，然后呢，我就来和猿猴们来啰嗦几句，批斗offset这群逗比家族，让我们继续往下面看：
1.用图说话：offset族谱图：
offset: 自己的！
javascript中有一套方便的 获取元素尺寸的办法就是offset家族；
第一集：续播》》哎，男人，哎，爱情，想想都痛，让我唱一首：为你付出那种真心你永远不了解，我还苦苦勉强爱上你的一切。。。爱你爱的死去活来，到头来我还是一只单身狗，宝宝心里苦，我想静静了。
2.offsetHight,offsetWidth：
注意：他们两个是得到对象的宽度和高度(自己的，与他人无关)!
话不多说，干活，看下面： offsetWidth = width + border + padding div { width:220px; border-left:2px solid red; padding:10px;} div.offsetWidth = 220 + 2 + 20
为什么不用 div.style.width？
因为div.style.width：只能得到行内的数值！！！（这个地方是重点需注意，也是新手经常混淆理解的地方。）
3.offsetLeft,offsetTop：
解释：返回距离上级盒子（最近的带有定位）左边的位置；
如果父级都没有定位则以body 为准,这里的父级指的是所有上一级不仅仅指的是,父亲,还可以是,爷爷,曾爷爷,
曾曾爷爷。。。还有很多很多爷爷，估计我们说三天三夜都说不完，反正是遇到为止，一路上都没追到，就找到祖先（body）。
offsetLeft：用一段代码示例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} #yeye { position: relative; overflow: hidden; background-color: orange; width: 600px; height: 600px; padding: 100px; } #father { width: 500px; height: 500px; background-color: pink; margin: 100px; margin-left:30px; } #son { width: 200px; height: 200px; background-color: purple; } </style> </head> <body> <div id="yeye"> <div id="father"> <div id="son"></div> </div> </div> </body> </html> <script> var son = document.getElementById("son"); console.log(son.offsetLeft); </script>
运行结果图：
offsetLeft 从父级的padding 开始算 父亲的border 不算
总结： 就是子盒子到定位的父盒子边框到边框的距离
4.offsetParent:offsetParent:返回改对象的父级 （带有定位）,不是亲爸爸！！
1.如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
2.如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。
5.offsetTop与style.top区别:
1.最大区别在于 offsetLeft:可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以,只有定位的盒子才有 left,top,right
2.offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
style.left = 300px parseInt（300px） 结果：300
parseInt（style.left） + parseInt（style.left）
3.offsetTop 只读，而 style.top 可读写。
4.如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
5.最重要的区别 style.left 只能得到行内样式 offsetLeft 随便
哦哦哦，原来是这样，哎呀呀，发现新大陆了，快分享给你的道友咯。带着缺爱的心情，
把offset家族一点点的扒出来，纸巾都用了两坨，哎，爱情就是这么难，喝酒去了，道友后会有期，
假如爱有天意，就给小编评论评论，分享分享吧
修道之人，在于勤奋。编程之人，在于苦练，猿猴之位，指日可待
爱你一万年，么么哒你一万年
