offset系列
offsetWidth: 获取元素的宽（包括左右padding和border）。
offsetHeight: 获取元素的高（包括上下padding和border）。
offsetTop: 获取元素距离上面位置的值。
offsetLeft: 获取元素距离左边位置的值。
offsetParent: 获取距离自己最近的有定位的父元素。
注意：
在style标签中设置的元素的样式属性是无法直接通过：对象.style.属性 来获取的，在style属性中设置的可以通过 对象.style.属性 获取。就是说：
在style标签中设置的样式属性，用style.width、style.height这样的方式是获取不到的。
在style属性中设置的样式属性，用style.width、style.height这样的方式可以获取到。
因此，获取元素的宽高这样的属性，无论是在style标签中设置的，还是在style属性中设置的，都可以用offset系列来获取。
offsetLeft:
获取元素距离左边位置的值。
元素没有脱离标准流：
父级元素的margin+父级元素的padding+父级元素的border+自己的margin
脱离文档流：
主要是自己的left值和自己的margin
offsetWidth与style.width的区别
style.width：
1.只能获取行内的样式2.获取到的是字符串格式
3.可以设置宽度，记得带单位
offsetWidth：
1.获取自身的宽度（padding，border也会获取）2.获取到的是数值类型，可以直接进行计算
3.offsetwidth是只读属性，只能获取不能设置
offsetLeft与style.left的区别
style.left：
1.只能获取行内的样式2.获取到的是字符串格式
3.可以设置距离，记得带单位
offsetLeft：
1.获取与offsetParent的真实距离（margin也会获取）2.获取到的是数值类型，可以直接进行计算
3.是只读属性，只能获取不能设置
offsetParent与parentnode的区别
parentnode:
找自己最近的父元素
用法：document.getElementById("item1").parentNode;
parentNode 属性可返回某节点的父节点。
如果指定的节点没有父节点则返回 null 。