在js中定位父级及偏移量offset的理解分析

1. 偏移量
   1）偏移量(offset dimension)：涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性
   2）偏移参照：定位父级offsetParent
   3） 图示理解：
   

2. offsetParent
   1） 定位父级：与当前元素最近的经过定位(position不等于static)的父级元素
   2）元素自身有fixed定位，offsetParent的结果为null
   当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null
   注意：firefox浏览器有兼容性问题
   3）元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为
   4）元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
   5）元素的parentNode是null
   6）对于定位父级offsetParent来说，IE7-浏览器存在以下bug
   bug1：当元素本身经过绝对定位或相对定位，且父级元素无经过定位的元素时，IE7-浏览器下，offsetParent是
   bug2：如果父级元素存在触发haslayout的元素或经过定位的元素，且offsetParent的结果为离自身元素最近的经过定位或触发haslayout的父级元素

3. offsetWidth
   1）offsetWidth表示元素在水平方向上占用的空间大小，无单位(以像素px计)
   2）offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width;

4. offsetHeight
   1）offsetHeight表示元素在垂直方向上占用的空间大小，无单位(以像素px计)
   2）offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width
   3）如果存在垂直滚动条，offsetWidth也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight也包括水平滚动条的高度
   4）举例：IE8-浏览器将垂直滚动条的宽度计算在width宽度和height高度中，width和height的值仍然是100px；而其他浏览器则把垂直滚动条的宽度从width宽度中移出，把水平滚动条的高度从height高度中移出，则滚动条宽度为17px，width宽度和height高度为剩下的83px

5. offsetTop
   1）offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
   2）IE7-浏览器在offsetTop属性的处理上存在bug
   bug1：若父级设置position: relative，则在IE7-浏览器下，offsetTop值为offsetParent元素的paddingBottom值
   bug2：若父级设置position: aboslute(或其他触发haslayout的条件)，offsetTop值为offsetParent元素的paddingBottom值和当前元素的marginTop值的较大值

6. offsetLeft
   1）offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离

7. 页面偏移
   1）某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，并加上offsetParent的相应方向的边框，如此循环直到根元素，就可以得到元素到页面的偏移量
   2）默认情况下，IE8-浏览器下如果使用currentStyle()方法获取和(甚至普通div元素)的边框宽度都是medium，而如果使用clientLeft(或clientTop)获取边框宽度，则是实际的数值
   3）所有偏移量属性都是只读的
   4）如果给元素设置了display:none，则它的偏移量属性都为0
   5）每次访问偏移量属性都需要重新计算
   6）注意：
   重复访问偏移量属性需要耗费大量的性能，所以要尽量避免重复访问这些属性。如果需要重复访问，则把它们的值保存在变量中，以提高性能