共计 2107 个字符，预计需要花费 6 分钟才能阅读完成。
接下来我们依然讨论盒模型中的 offset 系列：offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParent
offsetWidth/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);
offsetParent
offsetParent: 是指父级参照物。父级参照物不是父级元素，父级参照物与父级元素无关。父级参照物默认是 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.inner
inner.offsetParent //=> div#outer.outer
outer.offsetParent //=> body
由此可见，给父级设置 position 可以改变父级参照物。
offsetLeft/offsetTop
offsetLeft/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;
