先來一張名氣很大的圖

看著是不是很暈

看著實在是好暈，于是各種整理后手動畫了一個：

畫的還是很亂套，估計就自己能看懂了

發現主要分為幾部分：

一、元素自身寬度，邊框，內邊距，外邊距

div.style.width
div.style.margin
div.style.padding

二、元素定位的寬度和高度

當定位時，position的移動的距離，

div.style.top
div.style.left

三、scroll部分

scrollHeight:文檔總高度，可滾動總高度（包含元素本身，內外邊距，邊框）
scrollWidth:文檔總寬度，可滾動總寬度（包含元素本身，內外邊距，邊框）
scrollTop:相對于滾動條頂部的偏移，指滾動條頂端與當前滾動條位置的距離
scrollLeft:相當于滾動與左端的偏移

四、client部分

clientHeight:可視區域高度（不包含邊框，滾動條）
clientWidth:可視區域寬度
clientTop:內容區域相對于整個元素的左上角，當有邊距時為邊距的厚度，無邊距時可以為0
clientLeft:內容區域相對于整個區域的左上角，有邊距時為邊距的寬度，可以為0

五、offset部分

offsetHeight:獲取自身元素（包含邊距，滾動條）
offsetWidth:獲取自身元素（包含邊距，滾動條）
offsetTop:相對于最近定位祖元素的偏移，（祖元素必須是position,relative,absloute,fixed）
offsetLeft:同offsetTop

六、offsetParent

返回第一個祖定位元素，若父級元素無定位返回body,若父級元素已經定位返回相對應父級對應元素。