一、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

該屬性是可讀寫的，指的是當元素其中的內容吃哦出寬高的時候，元素被卷起的高度和寬度。

document相關的寬高