接下来我们依然讨论盒模型中的offset系列：offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParentoffsetWidth/offsetHeight正如在上一篇文章https://segmentfault.com/a/11…，在这里在写一遍，希望把几个类似的词放在一起去理解可以更好的区分他们的意思。offsetWidth就是当前元素的宽度width，包括边框、padding、以及内容的宽度，即：offsetWidth === border(left/right) + padding(left/right) + 内容的宽度(width);//或者offsetWidth === clientWidth + border(left/right);offsetHeight就是当前元素的高度height，包括边框、padding、以及内容的高度，即：offsetHeight === border(top/bottom) + padding(top/bottom) + 内容的高度(height);//或者offsetHeight === clientHeight + border(top/bottom);offsetParentoffsetParent:是指父级参照物。父级参照物不是父级元素，父级参照物与父级元素无关。父级参照物默认是body，如果我们给当前元素的父元素设置了position(等于relative|absolute|fixed)在会改变父级参照物。因为一旦我们给父元素设置了position会影响文档流。例如有这样的文档结构：//DOM结构<div id=“outer” class=“outer”> <div id=“inner” class=“inner”> <div id=“center” class=“center”> </div> </div></div>//css .outer{ width: 260px; height: 260px; border: 20px solid red; margin: 20px auto; } .inner{ width: 160px; height: 160px; border: 20px solid green; margin: 20px auto; } .center{ width: 60px; height: 60px; border: 20px solid blue; margin: 20px auto; }我们可以在控制台这样查看center、inner、outer的父级参照物center.offsetParent.tagName //=> “BODY"inner.offsetParent.tagName //=> “BODY"outer.offsetParent.tagName //=> “BODY"由此可以说明，如果不给div设置position属性，那么默认的div的父级参照物都是body下面我们给outer、inner都设置了position:relative会发生什么？//DOM不发生变化，我们把CSS修改成下面这样.outer{ position: relative; width: 260px; height: 260px; border: 20px solid red; margin: 20px auto;}.inner{ position: relative; width: 160px; height: 160px; border: 20px solid green; margin: 20px auto;}.center{ width: 60px; height: 60px; border: 20px solid blue; margin: 20px auto;}此时我们在控制台查看center、inner、outer的父级参照物center.offsetParent //=> div#inner.innerinner.offsetParent //=> div#outer.outerouter.offsetParent //=> body由此可见，给父级设置position可以改变父级参照物。offsetLeft/offsetTopoffsetLeft/offsetTop:是指当前元素相对于父级参照物的偏移量。 在标准浏览器中是指：当前元素的左边框的外沿到父级参照物边框的内沿，如上图中的4，5，6所示。 在IE8中，offsetLeft是指：当前元素的左边框的外沿到父级参照物的外沿，如上图中的7，8，9所示。用offsetLeft/offsetTop我们可以计算出当前元素的坐标（即当前元素距离body顶部和body左边的距离）offsetLeft/offsetTop 和 clientLeft/clientTop的区别offsetLeft/offsetTop：是指当前元素相对于父级参照物的偏移量。clientLeft/clientTop： //clientLeft:盒子左边框的宽度。 clientLeft === paddingLeft; //clientTop:盒子上边框的高度。 clientTop === paddingTop;