标签：div ie8 document style 相关 abs top chrome client
一、client该属性指的是元素的可视部分的宽度和高度，即padding+content
如果没有滚动条，即为元素设定的宽度和高度。如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来的宽高减去滚动条的宽高。
1.document.body.clientWidth/document.body.clientHeight
（1）假如没有padding，无滚动，则clientWidth = style.width
（2）假如有padding，无滚动，则cliengWidth = style.width + style.padding*2
（3）假如有padding，有滚动，则clientWidth = style.width + style.padding*2-滚动轴的宽度
2.document.body.clientLeft/document.body.clientTop
这两个返回的是元素周围边框的厚度，如果不指定一个边框挥着不定位该元素，则值为0，
用于读取border的宽度和高度
二、offset
1.document.body.offsetWidth/document.body.offsetHeight
该属性指的是元素的border+padding+content的宽度和高度
该属性和其内部的内容是否超出元素大小无关，只和本来设定的border,width,height有关。
offsetWidth = clientWidth + clientLeft*2
2.offsetParent
若当前元素的父级元素没有进行CSS定位（absolute或relative），offsetParent为body。
若父级元素有CSS定位，则offsetParent为最近的父级元素。
2.document.body.offsetLeft/document.body.offsetTop
在IE8以上的浏览器以及chrome中：offsetleft = offsetParent的（margin-left+border-left+padding-left)+当前元素的（margin-left）
在firefox中：offsetleft = offsetParent的（margin-left+padding-left)+当前元素的（margin-left）
三、scroll
1..document.body.scrollWidth/document.body.scrollHeight
document.body的scrollWidth和scrollHeight与div的scrollWidth/scrollHeight有区别
对于document.body的scrollWidth和scrollHeight
（1）给定的宽高小于浏览器的宽高，则scrollWidth/scrollHeight = 浏览器的宽高
（2）给定的宽高大于浏览器的窗口，且内容小于给定的宽高
document.body.scrollWidth = 给定的宽度+其所有的padding*2+margin*2+border*2
document.body.scrollHeight = 给定的高度+其所有的padding*2+margin*2+border*2
（3）给定的宽高大于浏览器的窗口，且内容大于给定的宽高
document.body.scrollWidth = 其内容的宽度+其所有的padding*2+margin*2+border*2
document.body.scrollHeight = 其内容的高度+其所有的padding*2+margin*2+border*2
对于div的scrollWidth/scrollHeight
（1）无滚动轴时：
div.scrollWidth = 给定的宽度 + padding*2
div.scrollscrollHeight = 给定的高度 + padding*2
（2）有滚动轴时
div.scrollWidth = 实际的宽度 + padding*2
div.scrollscrollHeight = 实际的高度 + padding*2
2.document.body.scrollLeft/document.body.scrollTop
该属性是可读写的，指的是当元素其中的内容吃哦出宽高的时候，元素被卷起的高度和宽度。
标签：div ie8 document style 相关 abs top chrome client
原文地址：http://www.cnblogs.com/ycherry/p/7255993.html
