爲了方便我們班的學生來看，所以我想着不如直接發在網上，以後還可以繼續看，可以進行二次完善，有不足的地方，希望大家可以一起來改正。
我將從以下的幾個點來進行講解：
1.clientWidth和clientHeight
2.clientLeft和clientTop
3.offsetWidth和offsetHeight
4.offsetTop和offsetLeft
5.scrollWidth和scrollHeight
6.scrollTop和scrollLeft
1.clientWidth和clientHeight
表示內容區域的高度和寬度，包括padding大小，但是不包括邊框和滾動條。
2.clientLeft和clientTop
表示內容區域的左上角相對於整個元素左上角的位置（包括邊框）
獲取對象的border寬度
3.offsetWidth和offsetHeight
當前對象的寬度,當前對象的高度
offsetWidth=(border-width)*2+padding-left+width+padding-right
offsetHeight=(border-width)*2+padding-top+height+padding-bottom
offsetWidth和style.width的區別和聯繫：
style.width也是當前對象的寬度(width+padding+border)。
區別：1)style.width返回值除了數字外還帶有單位px；
2)如對象的寬度設定值爲百分比寬度,則無論頁面變大還是變小，style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值；
3)如果沒有給 HTML 元素指定過 width樣式，則 style.width 返回的是空字符串；
4.offsetTop和offsetLeft
offsetLeft :當前對象到其上級層左邊的距離。不能對其進行賦值，設置對象到其上級層左邊的距離請用style.left屬性。style.left當前對象到其上級層左邊的距離。
區別：1)style.left返回值除了數字外還帶有單位px；
2)如對象到其上級層左邊的距離設定值爲百分比， style.left返回此百分比,而offsetLeft則返回到其上級層左邊的距離的值；
3)如果沒有給 HTML 元素指定過 left樣式，則 style.left返回的是空字符串；
其中涉及到了一個概念就是offsetParent：
1.offsetParent元素只可能是下面這幾種情況：
body
position不是static的元素
| 或 | ，但必須要position: static。 2.對於非body的父元素，但是要給父元素設置定位。 3.簡單來說:就是子盒子到定位的父盒子邊框到邊框的距離 |
|---|
5.scrollWidth和scrollHeight
scrollWidth:獲取對象的滾動寬度 。
scrollHeight: 獲取對象的滾動高度。
6.scrollTop和scrollLeft
這兩個屬性的適用範圍：
這兩個屬性只能用於元素設置了overflow的css樣式中。否者這兩個屬性沒有任何意義。且overflow的值不能爲visible，但可以爲hidden,auto,scroll的之中，但是hidden最常見。
注意：在對這兩個參數設置值時，直接用數字就可以了，否者不起作用。
javascript中元素的scrollLeft和scrollTop屬性的參數意義：
scrollLeft：是該元素的顯示（可見）的內容與該元素實際的內容的距離。
即設置scrollleft就如同你拖動水平滾動條一樣。假如你的頁面太大，瀏覽器的寬度不夠，就會出現滾動條。一開始scrollLeft的值爲0，你就看到了你的頁面最左邊的內容。而不顯示超過瀏覽器的那部分，當你向右拖動滾動條時，scrollLeft的值在增大，你就看到了右邊因隱藏的東西，而看不到左邊隱藏的部分。他就會從scrollLeft的位置開始顯示，而不顯示0-scrollLeft的元素內容。即：該元素的顯示位置與實際內容的位置的距離變大.
總結一句話，就是你真實數據藏起來多少，scrollleft就是多少，scrollTop是一樣的