DOM盒模型的各种width和height属性

client系列（和内容是否溢出盒子无关）

1. clientWidth:内容的宽度+左右padding
2. clientHeight:内容的高度+上下padding
3. clientLeft:左边框的宽度（border-left-width）
4. clientTop:上边框的宽度（border-top-width）

offset系列（和内容是否溢出盒子无关）

1. offsetWidth:clientWidth+左右边框
2. offsetHeight:clientHeight+上下边框
3. offsetLeft:子元素的外边框相对于父定位元素（没有则指向body）的内边框的偏移量
4. offsetTop:子元素的外边框相对于父定位元素（没有则指向body）的内边框的偏移量
5. offsetParent: 指向子元素的定位父元素，如果没有就指向body，body指向null。

scroll系列

1. scrollWidth:当内容未溢出容器时等于clientWidth.当溢出时是真实宽度+左右padding
2. scrollHeight:当内容未溢出容器时等于clientHeight。当溢出时是真实高度+上下padding
3. scrollTop:滚动条卷去的高度
4. scrollLeft:滚动条卷去的宽度
   注：如果设置了overflow:hidden;各浏览器结果不同。

取值问题

我们通过这13个属性获取的都是近似的整数。

浏览器的盒模型

1. 对于浏览器而言，clientWidth/clientHeight是当前浏览器可视窗口的宽高（一屏幕的宽高）
2. 对于浏览器而言，scrollWidth/scrollHeight是当前页面的真实宽高（所有屏加起来宽高的近似值）

浏览器盒模型属性获取/设置方法的封装

function win (attr,value) {
    if (typeof value !=='undefined') {
        return document.documentElement[attr] ||document.body[attr];
    }
    document.documentElement[attr]=value;
    document.body[attr]=value;
}

获取某元素相对浏览器的偏移量 方法的封装

function offset (curEle) {
    var l=curEle.offsetLeft;
    var t=curEle.offsetTop;
    var par=curEle.offsetParent;
    //一层层定位祖先向上累加
    while (par) {
        if (window.navigator.userAgent.indexOf('MSIE 8.0')!==-1) {
                l+=par.clientLeft;
                t+=par.clientTop;
        }
        l+=par.offsetLeft;
        t+=par.offsetTop;
        par=par.offsetParent;
    }
    return {left:l,top:t};
}

计算后的样式值的获取

一般我们用 元素.style.样式来获取元素的样式。这样获取到的是元素的行内样式。如果想获取元素经过计算后的样式需要使用window.getComputedStyle(ele,null);
经过浏览器计算过的样式是指 只要当前标签可以在浏览器中呈现出来，那么他所有样式都是经过浏览器计算过的，哪怕那些样式你没有写也可以获取到。
window.getComputedStyle(box,null)接收两个参数。 box指要获取样式的元素，null指伪类。

获取计算后样式的 方法封装

function getCss (curEle,attr) {
    var val=null;
    try {
        val=window.getComputedStyle(curEle,null)[attr];
    } catch (e) {
        val=curEle.currentStyle[attr];
    }
    return val;
}