引子
曾經校招面試的時候，學習了三個月前端的我去某廠面試，面試官循循善誘考察了一個開發中的實際場景，其中有需要用到某元素的高度，面試官問我clientHeight和offsetHeight的區別是什麼，我當時一臉懵逼，這個問題對於當時的我來說已經完全超綱了…面試結果自然是面試官感謝我來參加面試…
好漢不提當年囧，今天總結一下常見的元素各種寬高。
一些height和width
clientHeight和clientWidth
沒有橫向滾動條時：clientHeight = css設定的height + paddingTop + paddingBottom
有橫向滾動條時：clientHeight = css設定的height + paddingTop + paddingBottom – 滾動條的高度
clientWidth類似，就不再贅述
ps：這個屬性是隻讀屬性，對於沒有定義CSS或者內聯佈局盒子的元素為0
offsetHeight和offsetWidth
offsetHeight = ccss設定的height + paddingTop + paddingBottom + borderTop + borderBottom
offsetWidth類似，就不再贅述
scrollHeight和scrollWidth
無滾動條時：scrollHeight = clientHeight = css設定的height + paddingTop + paddingBottom
有滾動條時：scrollHeight = 實際內容的高度 + paddingTop + paddingBottom（即要算上因為滾動被遮住的內容高度
scrollWidth不再贅述
一些Top和Left
clientLeft和clientTop
clientTop = borderTop
clientLeft = borderLeft
offsetLeft和offsetTop
以offsetTop為例，搞懂它首先要明白offsetParent是什麼
offsetParent是元素最近的有定位的父元素，如果父元素中沒有有定位的，那麼就是最近的 table, table cell 或根元素。
offsetTop 和 offsetLeft 都是相對於offsetParent內邊距邊界的。
scrollTop和scrollLeft
scrollTop即為向上滾動時，元素內容區被遮住的那一部分。
scrollLeft同理