JS有很多操作是需要尺寸的具體值的，只靠人工的去計算效率是非常低的，但是offSet家族的存在就完美的解決了這個問題，下面我們來看看它常見的幾個用法：

1.offsetHeight和offsetWidth

offsetHeight  = 內容 + 內邊距 + 邊框,offsetWidth也是這個計算公式，這兩個可以準確的計算當前盒子的元素大小

2.offsetLeft和offsetTop

它們會返回當前盒子距離帶有定位的父元素的尺寸長度，如果沒有父元素沒有定位，那麼它會一級一級往上找，一直到找到帶定位的元素或者找到body。

注意：返回的長度不包含border的長度，也就是它們是計算

3.offsetParent

1、返回改物件的父級 （帶有定位）

         如果當前元素的父級元素沒有進行CSS定位 （position為absolute或  relative，fixed），    offsetParent為body。

2、如果當前元素的父級元素中有CSS定位      （position為absolute或 relative，fixed），    offsetParent取最近的那個父級元素。

4.offetxxx和style.xxx的區別

a) style.left只能獲取行內的，而offsetLeft則可以獲取到所有的；

b) offsetLeft 可以返回沒有定位盒子距離左側的位置；而style.left不可以，其只能返回有定位盒子的left;
c) offsetLeft 返回的是數字，而 style.left 返回的是字串，除了數字外還帶有單位：px;
注意：可以用parseInt進行轉化；比如：styleLeft='300px' ---> parseInt(styleLft) ---> 300
d) offsetLeft是隻讀的，而style.left是可讀寫；
e) 如果沒有給 當前 元素指定過 top 樣式，則 style.top 返回的是空字串，而offsetXXX就算沒有設定也會返回

很明顯offset家族就是為子絕父相服務的。