js取div的宽高咋办，css有content-box，border-box，padding-box，表现又不一样。好在有个offsetWidth，
a
加不加box-sizing的offsetWidth分别为100和50，content-box的时候是15*2+10*2+50=100；另一个是15*2+10*2+0=50；border-box的时候width是指width+border+padding的值。所以可得
offsetWidth=borderWith+paddingWidth+width;都成立。offsetWidth不受盒子模型影响，用起来是非常好的。
在jq中，提供innerWidth()方法和outerWidth方法，计算是paddingWidth+width;但是在设置的时候不能直接设置，他就是个虚拟的值，不存在的属性。outerWidth() 计算是borderWidth+paddingWidth+width;jq还有个height()是只取width的。
还有就是浏览器窗口大小和页面大小，网景给我们提供了一个好用的只读属性innerWidth
，IE9也支持它，用它获取窗口的宽度，但是旧版本的IE的怪异模式下表现不一，ie又发明了一套clientXXX的属性，用于获取元素可视区域的尺寸。//可视区的宽度，不包括滚动条，即窗口大小var windowWidth=document.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
如果不支持旧版本ie，或者手机框架，可以放心的用
windowWidth=window.innerWidth;
再来看文档的宽，标准浏览器搞了一套outherXXX的属性，那是获得浏览器尺寸的。ie又给我们奉上了scrollXXX和offsetXXX，但是实现的时候又有好多的意见不一致，搞得没法通用。留下兼容性问题。
//浏览器尺寸的outerWidth和outherHeight//offsetWidthIE,Opera认为offsetWidth=clientWidth+滚动条+边框NS,FF认为offsetWidth是网页内容实际宽度，可以小于clientWidth//srollWidthIE、Opera认为scrollWidth是网页实际内容宽度，可以小于clientWidthNS、FF认为srcollWidth是网页内容宽度，不过最小值是clientWidth//于是取其最大值var pageWidth=Math.max( document.documentElement.scrollWidth, document.documentElement.offsetWidth, document.body.scrollWidth, document.body.offsetWidth )
下面再来说元素的坐标
div.offsetLeft,offsetTop,都是相对于offsetParent的位置，我们一直向上累加，就能得到元素相对于页面的坐标。
元素的offsetParents是怎么确定的呢？
如果元素被移出dom或display为none，或为HTML,BODY元素，或position的精确值为fixed时，返回null，
否则分为2种情况，position为absolute，relative的元素的offsetParent总是为其最近的已定位的祖先，没有找最近的td，th元素，再没有返回body。position为static的元素的offsetPatent先找最近的td，th，table元素，再没有返回body。但现实中，ff在position为fixed返回body，在ie678下，会增加一条规则，先寻找离元素最近的设置有能激活hasLayout的祖先元素。
jq也有个offsetParent，它将选择元素的所有offsetParent收集起来，包装为jq对象返回。
浏览器认为offsetParent最高取到body，可能为null，jq认为元素的offsetParent的position必须为relative或absolute，否则继续回上寻找另一个被定位的祖先，没有返回html，jq认为position：fixed也有offsetParent，就是当前可视区。window.pageXoffset是滚动条x距离，pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
还有div.scrollTop,div.scrollLeft...
上一张老图
