client家族 scroll家族 offset家族

client家族（可视区域）：clientWidth=content+padding （不包括border）其它一样
clientLeft=border-left-width (边框的宽度) 其它一样
offset家族：offsetWidth=padding+content+border 其它一样
offsetLeft=margin-left (当前元素距离有定位的父盒子左边的距离)

scroll家族 ：scrollWidth/scrollHeight:能够滚动的内容的 宽度 和 高度
scrollTop=滚动条滑动和可视区域的顶部的距离

封装scroll 封装client
兼容重要点：document.compatMode的用法：获取页面宽高

在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。

document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat。

BackCompat：标准兼容模式关闭（不遵循w3c标准），浏览器客户区宽度document.body.clientWidth

CSS1Compat：标准兼容模式开启（遵循w3c标准），浏览器客户区宽度document.documentElement.clientWidth

封装scroll 调用scroll().top

/*
* 封装scroll函数 获取页面滚动的top left
* */
function scroll() {
    if(window.pageXOffset!==null){
        return {
            top:window.pageYOffset,
            left:window.pageXOffset
        }
    }else if(document.compatMode ==="CSS1Compat"){
        return {
            top:document.documentElement.scrollTop,
            left:document.documentElement.scrollLeft
        }
    }

    return  {
        top:document.body.scrollTop,
        left:document.body.scrollLeft
    }
}

封装client client().width

//获取屏幕的宽度高度
function client() {
    if(window.innerWidth) {
        return {//ie9 最新浏览器
            width: window.innerWidth,
            height: window.innerHeight
        }
    }else if(document.compatMode ==="CSS1Compat"){
            return {//w3c
                width:document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            }
        }
        return  {
            width:document.body.clientWidth,
            height:document.body.clientHeight
        }
}