JS盒模型属性（client,scroll,offset家族）

client家族

• clientWidth：获取对象的内容可视区域的宽度，即clientWidth=width+左右padding，不包括滚动条。

• clientHeight：获取对象的内容可视区域的高度，即clientHeight=height+上下padding，不包括滚动条。
  注：与内容是否溢出无关
  兼容问题
  怪异模式与标准模式下获取clientWidth的方法不一样

//求浏览器视口尺寸
function getViewportOffset(){
    if(window.innerWidth){
        return {
            w : window.innerWidth,
            h : window.innerHeight
        }
    }else if(document.compatMode === 'BackCompat'){//怪异模式
       
        return {
            w : document.body.clientWidth,
            h : document.body.clientHeight
        }
    }else{
         //标准模式 document.compatMode === 'CSS1Compat'
        return {
            w : document.documentElement.clientWidth,
            h : document.documentElement.clientWidth
        }
    }
}

• clientTop：获取对象的上边框的宽度。

• clientLeft：获取对象的左边框的宽度。

scroll家族

• scrollWidth：获取对象内容的实际宽度，scrollWidth=左padding+width

• scrollHeight：获取对象内容的实际高度，scrollHeight=上padding+height

===============================================

• scrollTop：页面卷出视口的高度

• scrollLeft：页面卷出视口的宽度
  兼容问题

//求滚动条滚动距离
function getScrollOffset(){
    if(window.pageXOffset){
        return {
            x : window.pageXOffset,//IE8以下不兼容
            y : window.pageYOffset
        }
    }else{
        return {
            x : document.body.scrollLeft + document.documentElement.scrollLeft,//IE8以下用
            y : document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

offset家族

• offsetWidth：获取对象的宽度，即offsetWidth=width+左右padding+左右border。也可以写成offsetWidth=clientWidth+border。

• offsetHeight：获取对象的高度，即offsetHeight=height+上下padding+上下border。也可以写成offsetHeight=clientHeight+border。

Bug

offsetLeft 指的是元素与offsetParent之间的距离

首先确定offsetParent
在IE8+，等高版本浏览器中
假如祖先元素中都没有定位，offsetParent就是body元素，假如祖先元素中有定位，则以最近的带有定位的祖先元素为准，与自己是否定位无关
在IE6/7浏览器中
自身没有定位，参考的是最近的有宽高的祖先元素，没有宽高参考的是body
自身有定位与高版本浏览器一致
offsetLeft
IE9+和高版本浏览器
元素自身左边框外部到offsetParent左边框内部的距离
IE8
比高版本浏览器的offsetLeft多一个offsetParent边框
兼容处理：*
1.自身元素相对定位