offset client style 之间的区别

offset

返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。

 父元素是浏览器窗口的情况下：
      offsetHeight = border + padding  不包含margin 也就是说offset包含border及以内的区域。
      offsetTop = margin + top  不包含border及以内的值
      offsetLeft = margin + left


 在元素内
     父级集中无position的情况下//parentNodes hasn't attribute that position

         1.offsetTop 相对于body元素的内容开始的  也就是相对于父级元素的border
           child.offsetTop = child.marginTop + parents.paddingTop + parents.borderTop

         2.offsetLeft 同上
           child.offsetLeft = child.marginLeft + parents.paddingLeft + parents.borderLeft

     父级元素集中有定位的情况下 // parentNodes has attribute to position

         1.offsetTop :child.offsetTop = child.marginTop + parents.paddingTop   不包含parent.border 从内容区域开始，不包含border

client

        clientWidth和clientHeight 不包含border  包含padding + content的区域。
        clientTop = border的宽度
        clientLeft = border 的宽度

        注：如果是浏览器窗口的高度，可以是document.documentElement.clientHeight

style

        style.top 也能返回相对于父级定位元素的位置，它和offset.top返回的值是不一样的，style.top返回的是字符换（包含px）,而offset.top返回的是number。
        offset.top是一个只读属性，style.top是一个读写属性，可以改变。
        如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
        offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

关于元素宽度和高度有offsetHeight，clientHeight，
计算：border = element.offsetHeight - element.clientHeight;
border = element.clentLeft

offset 和client的区别
完全不同的两个东西，client描述的是对象的可视区域，offset描述的是对象相对于offsetParent的相对位置。