<h3 id="前言">前言</h3>其實，我所有文章都是一邊寫一邊學的闹击，文章思路上基本上就是我自己的學習感悟過程，我喜歡通過寫文章來揭露自己認知上的缺失成艘，審判自己對知識點掌握程度赏半。offset，client和scroll 這4個關(guān)于坐標計算的東西淆两，說真的断箫，我雖然有用過，但還是不能完全清楚它們本質(zhì)和區(qū)別秋冰，當要用起來的時候自然就只能上網(wǎng)查了仲义。所以庫這東西，私底下還是少用的好剑勾，便利了開發(fā)埃撵，但基礎(chǔ)的東西還是容易忘記的。
<h3 id="offset">offset</h3>offset 的意思就是“偏移”虽另。偏移暂刘，在字面上看是有一定含義的，一個東西他原來有一個位置捂刺，但是由于外力或其他關(guān)系谣拣，位置發(fā)生了變化，前后位置信息變化就可以看作是 偏移族展。在頁面上來說森缠，offset 有5個東西需要知道的，分別是：offsetParent仪缸、offsetWidth贵涵、offsetHeight、offsetTop、offsetLeft独悴。
<h4 id="offsetWidth和offsetHeight">offsetWidth和offsetHeight</h4>offsetWidth和offsetHeight基本就是同一個概念例书，很好理解，分別描述了一個元素的絕對寬度和絕對高度刻炒，不包括因 overflow 而導致未顯示的部分决采，也就是其實際占據(jù)的寬度（高度），整型坟奥，單位像素树瞭。用一條計算公式就可以理解清楚：
offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width
offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width
<h4 id="offsetParent">offsetParent</h4>offsetParent 是一個比較重要的概念，任何元素的自身偏移量都是基于它的offsetParent而言的爱谁。offsetParent 盡管帶了parent 一詞晒喷，并它不等同于元素的父元素。元素的offsetParent屬性返回一個對象的引用访敌，這個對象是距離調(diào)用offsetParent的元素最近的（在包含層次中最靠近的）凉敲，并且是已進行過CSS定位的容器元素。如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素的引用寺旺。舉個例子
<body>
<div class="d1">
<div class="d2"></div>
</div>
</body>
// 在沒有css定位時爷抓，div.d2 的 offsetParent 是body，相關(guān)計算也是在body和div.d2間進行阻塑。
<style>
.d1{ position: relative; }
</style>
<body>
<div class="d1">
<div class="d2"></div>
</div>
</body>
// div.d1進行了定位蓝撇，div.d2 的 offsetParent 是div.d1，相關(guān)計算也是在div.d1和div.d2間進行陈莽。
注意：body節(jié)點的offsetParent為null渤昌！
<h4 id="offsetLeft和offsetTop">offsetLeft和offsetTop</h4>重點來了，offsetLeft和offsetTop是我們經(jīng)常會用到的概念走搁，用于計算頁面元素的位置坐標独柑。
obj.offsetLeft 指 obj 相對于html版面或由 offsetParent 屬性指定的父坐標的計算左側(cè)位置，整型私植，單位像素群嗤。
obj.offsetTop 指 obj 相對于html版面或由 offsetParent 屬性指定的父坐標的計算上側(cè)位置，整型兵琳，單位像素狂秘。
實際情況下，當obj.offsetParent不是body時是比較好計算的躯肌，直接計算obj和obj.offsetParent的頁面舉例即可者春，計算公式是：
offsetLeft = offsetParent的padding-left + 中間元素的offsetLeft之和 + obj的margin-left
offsetHeight = offsetParent的padding-top + 中間元素的offsetTop之和 + obj的margin-top
但是，當obj.offsetParent為body或者為null時（就是說obj是body）清女，計算往往就開始變得不一樣钱烟，不一樣的地方在與obj.offsetParent與計算點是沒有關(guān)系的。從上面我們基本可以知道，offsetLeft（offsetHeight）就是從 html版面或由 offsetParent（前面的描述還是正確的拴袭，重點在“或”字）的padding box（盒計算模型的一種）左上角到obj border box左上角的距離读第。下面介紹一下幾種特別一些的情況
- 當obj.offsetParent為body 且 body沒有設(shè)置css定位時，計算是從html版面的padding box左上角開始計算的
- 當obj.offsetParent為body 且 body設(shè)置了css定位時拥刻，計算是從body的padding box左上角開始計算的
- 不會出現(xiàn)從html版面的margin box左上角開始計算的情況怜瞒，也不建議對html元素設(shè)置邊距一類的樣式
<h3 id="scroll">scroll</h3>頁面上的滾動計算還是比較簡單的，scroll一類有4個屬性：scrollHeight般哼、scrollWidth吴汪、scrollLeft和scrollTop。
- obj.scrollHeight獲取obj的滾動高度蒸眠，如果obj沒有縱向滾動條漾橙，則獲取對象的實際高度
- obj.scrollWidth獲取obj的滾動高度，如果obj沒有縱向滾動條楞卡，則獲取對象的實際高度
- obj.scrollLeft獲取或設(shè)置obj的橫向滾動條的滾動距離霜运，如果obj沒有橫向滾動條，則返回0蒋腮；對沒有出現(xiàn)滾動條的obj設(shè)置scrollLeft值是無效的觉渴，它始終為0
- obj.scrollTop獲取或設(shè)置obj的縱向滾動條的滾動距離，如果obj沒有縱向滾動條徽惋，則返回0；對沒有出現(xiàn)滾動條的obj設(shè)置scrollTop值是無效的座韵，它始終為0
- 當obj為body或html险绘，且無滾動條時，scrollHeight和scrollWidth就等于版面（瀏覽器窗口）的可見大小值
- window對象沒有上述的4個屬性誉碴，但是有scrollX和scrollY宦棺，意思和scrollLeft、scrollTop一致黔帕。window對象還有一個scrollTo(x,y)方法代咸，讓頁面滾動到指定的坐標處。
<h3 id="client">client</h3>client意思是“客戶（端）”成黄，然而和坐標計算沒太大的聯(lián)系呐芥。client一般都是指obj的content box可見部分的大小，不包含padding奋岁、border和滾動條思瘟。
- clientHeight, clientWidth這兩個屬性大體上顯示了元素內(nèi)容的象素高度和寬度
- clientLeft,clientTop這兩個返回的是元素周圍邊框的厚度,如果不指定一個邊框或者不定位改元素,他的值就是0。clientLeft 返回對象的offsetLeft屬性值和到當前窗口左邊的真實值之間的距離闻伶。
