常見clientWidth、clientHeight、offsetWidth、offsetLeft，clientX、scrollTop等詞語，比較混亂，現在總結下他們的區別。

1. clientWidth：元素的寬度（width+padding），offsetWidth相比clientWidth，多個border的值 ( width+padding+border)。clientHeight 、 offsetHeight略

//某個元素的寬度和高度
var div1 = document.getElementById('div1');
console.log('元素的寬width+padding',        div1.clientWidth );

 
//body的寬度
console.log('body的寬',document.body.clientWidth);

//可視區的寬度，也就是html的寬度
console.log('可視區的寬', document.documentElement.clientWidth );

//可視區的寬度高度:你可以調整瀏覽器視窗大小調整的，body的高度不設定的話是根據內容來的，內容少，瀏覽器不出現滾動條，body的高度小於可視區高度，內容多，瀏覽器出現滾動條，body的高度大於可視區高度。

但是css3有個屬性：box-sizing

box-sizing: content-box|border-box|inherit
 

比如，div1設定

1     <style type="text/css">
2         #div1 {
3             width: 200px;
4             height: 200px;
5             padding: 50px;
6             border: 10px solid #000000;
7         }
8     </style>

box-sizing預設是content-box，就是width不包含padding和border的模式，測試，IE7+及其他瀏覽器正常，顯示 clientWidth為50+200+50=300，offsetWidth為10+50+200+50+10=320，多了2邊的border。

IE6下clientWidth為180，offsetWidth為200，因為6下的width是包含padding和border的，但是沒人用ie6了，不細說

但是說明一個問題，clientWidth顯示的很準確，就是實際width+padding的值，ie6下這個值比較小，也顯示小了。

div1加上 box-sizing:border-box;再看看什麼反應，IE7不認識 box-sizing:border-box; 出現結果和不加 box-sizing:border-box;一樣，其他瀏覽器都是 clientWidth為180，offsetWidth為200。

結論就是：

1.clientWidth的值挺準確的，去掉邊框的“盒子”佔多少畫素就顯示多少畫素。box-sizing的設定影響到了實際顯示，也自然的影響到了clientWidth的值。

2.offsetWidth就是clientWidth加上兩邊border

3.clientWidth的值可以讀，但是不能寫。例如寫： div1.clientWidth = 500; div1並不會變大，有些瀏覽器報警告或錯誤。

2.待續