我們需要了解幾個基礎概念，每個HTML元素都有下列屬性
offsetWidth clientWidth scrollWidth
offsetHeight clientHeight scrollHeight
offsetLeft clientLeft scrollLeft
offsetTop clientTop scrollTop為了理解這些屬性，我們需要知道HTML元素的實際內容有可能比分配用來容納內容的盒子更大，因此可能會出現滾動條，內容區域是視口，當實際內容比視口大的時候，需要把元素的滾動條位置考慮進去。
- clientHeight和clientWidth用於描述元素內尺寸，是指 元素內容+內邊距 大小，不包括邊框（IE下實際包括）、外邊距、滾動條部分
- offsetHeight和offsetWidth用於描述元素外尺寸，是指 元素內容+內邊距+邊框，不包括外邊距和滾動條部分
- clientTop和clientLeft返回內邊距的邊緣和邊框的外邊緣之間的水平和垂直距離，也就是左，上邊框寬度
- offsetTop和offsetLeft表示該元素的左上角（邊框外邊緣）與已定位的父容器（offsetParent物件）左上角的距離
- offsetParent物件是指元素最近的定位（relative,absolute）祖先元素，遞迴上溯，如果沒有祖先元素是定位的話，會返回null