offsetParent
- 只读属性
- 返回一个指向最近的包含该元素的定位元素或者最近的table、td、th、body元素
- 当元素的
style.display设置为none时，offsetParent返回null
兼容性
Webkit内核中，如果元素为隐藏（该元素或其祖先元素的style.display设置为none），或者style.position设置为fixed，则offsetParent返回null- IE9中，如果该元素设置
style.position为fixed，则该元素返回null（display:none无影响）
offsetTop
- 只读属性
- 返回当前元素相对于其
offsetParent元素的顶部内边距的距离
offsetLeft
- 只读属性
- 返回当前元素左上角相对于其
offsetParent节点的左边界偏移的像素值
offsetHeight
- 只读属性
- 整数（四舍五入）
- 返回元素的像素高度，高度包含元素的边框、垂直内边距、水平滚动条（如果存在并且渲染的话
- 不包含伪类元素
::before和::after的高度 - 如果元素被隐藏（该元素或祖先元素设置
display:none），则返回0
offsetWidth
- 只读元素
- 整数（四舍五入）
- 返回元素的布局宽度，通常包括元素的边框、水平线上的内边距、竖直方向上的滚动条、以及CSS设置的
width值
相对于块级元素来说
对于块级元素来说，offsetTop,offsetLeft,offsetHeight,offsetWidth描述了元素相对于offsetParent的边界框。
相对于行内元素来说
如下例子中，第二个行内元素span中的内容会被截断到下一行：
<!--CSS-->
#box {
width: 200px;
height: 100px;
border: 1px solid black;
}
<!--DOM结构-->
<div id="box">
<span>这是第一个行内元素</span>
<span id="long">这是第二个行内元素这是第二个行内元素这是第二个行内元素这是第二个行内元素</span>
</div>
行内元素中，offsetTop和offsetLeft描述的是第一个边界框的位置（即用Element.getClientRects获取到的ClientRect对象集合的第一个对象的top和left）。
offsetWidth和offsetHeight描述的是边界框的尺寸（即使用Element.getBoundingClientRect获取到的 width和height）。
