参考链接
offsetParent 定位父级
定位父级offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素，主要分为下列 4种情况:
- 元素自身有fixed定位，offsetParent的结果为null
当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，
此时没有定位父级，offsetParent的结果为null
- 元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为
<body> - 元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
<body>元素的parentNode是null
console.log(document.body.offsetParent);//null
offsetXxx 偏移量
偏移量共包括offsetHeight、offsetWidth、offsetLeft、offsetTop这四个属性
首先先回顾一下border-box与content-box的差异
假设设置一个div如下
width:100px;
height:100px;
border:1px solid;
padding:10px;
margin:10px
这里要注意的点是, css的width属性与盒模型中的content-width不是一回事
如果是 box-sizing:border-box
那么width的含义代表的是 content-width + padding-width + border-width
你从chrome中可以看到的计算后的width是100px，因为你正是如此设置的
而从页面上看到的可视占地面积是等于100px的
如果是 box-sizing:content-box
那么width的含义代表的是 content-width
你从chrome中可以看到的计算后的width是100px，因为你正是如此设置的
而从页面上看到的可视占地面积是大于100px
因为这时的可视占地面积还会包含着padding-width + border-width
offsetWidth/Height 的重要公式
这里提到的从页面上看到的可视占地面积其实就与 offsetWidth/Height相关,
offsetWidth = 总的borderWidth + 总的paddingWidth + contentWidth;
// 这个公式是一个绝对正确的正解，要注意contentWidth和width属性不是一回事
// contentWidth当同width不同box-sizing时，数值时不同的
box-sizing:content-box;
width:100px;
height:100px;
border:1px solid;
padding:10px;
margin:10px时
因为width指的是 content-width,
因此可视占地面积 (offsetWidth/Height) 其实不止100px，
因此offsetWidth/Height等同于100+2+20 即122
如果box-sizing:border-box;
因为width指的是 content-width + padding-width + border-width,
即可视面积其实就是width的数值
因此offsetWidth/Height等同于100
el.style.width 修改盒子大小
offset家族仅仅是只读属性
垂直/水平滚动条也算在offsetWidth/Height内
offsetTop/Left
- top表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
- left表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
