js中有一套方便的獲取元素尺寸的辦法就是offset家族:
offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同組成了offset家族
offsetWidth = width + padding + border
offsetHeight = height + padding + border
offsetLeft 和 offsetTop:
返回距離上級帶有定位的盒子左邊的位置，如果父級元素沒有定位，則以body為準
offsetLeft從父親的padding開始算，父親的border不算
offsetParent:返回該對象的帶有定位的父級，如果當前元素的父級元素沒有
進行CSS定位，則offsetParent為body.如果當前元素的父級元素中有定位，則
取最近的父級元素
offsetLeft和style.left的區別
一、最大區別在于offsetLeft可以返回沒有定位的盒子距離左側的位置
而style.left不可以。
二、offsetTop返回的是數字，而style.top返回的是字符串(24px),除了數字外，還
帶有單位。
三、offsetTop只讀，而style.top讀寫
四、如果沒有給HTML元素設置top樣式，style.top返回的是空字符串。
scroll家族主要包括scrollWidth、scrollHeight scrollLeft scrollTop onscroll事件
scrollWidth/scrollHeight是指內容的高度
scrollLeft/scrollTop指被卷去的左側和頭部(瀏覽器無法顯示的部分)
一般調用document.body.scrollTop
on scroll滾動事件(window.onscroll = func)
屏幕每滾動一次，哪怕只有一個像素也會觸發這個事件。這樣就可以檢測屏幕滾動了
只能有一個寫了多個以最后一個為準，同理 window.onload
未聲明 DTD（谷歌只認識他）（IE9+認識他）document.body.scrollTop
已經聲明DTD（IE678只認識他）(IE9+任何時候)
document.documentElement.scrollTop
火狐/谷歌/ie9+以上支持的(不管DTD)
window.pageYOffset
滾動到指定位置:window.scrollTo 把內容滾動到指定的坐標
scrollTo(xpos,ypos)
xpos 必需。要在窗口文檔顯示區左上角顯示的文檔的 x 坐標。
ypos 必需。要在窗口文檔顯示區左上角顯示的文檔的 y 坐標
clientWidth:獲取網頁可視區域寬度
clientHeight:獲取網頁可視區域的高度
如果是盒子調用，指的是盒子本身
如果是body/html調用，指的是可視區域的大小
clientX:鼠標距離可視區域左側距離(event調用)
clientY:鼠標距離可視區域上側距離(event調用)
clientTop/clientLeft盒子的border寬高
client家族之:檢瀏覽器寬/高度(可視區域)
ie9及其以上的版本
window.innerWidth/Height
標準模式（有DTD）（“CSS1Compat”）
document.documentElement.clientWidth
document.documentElement.clientHeight
怪異模式 （沒有DTD）
document.body.clientWidth
document.body.clientHeight
三個家族的區別:
區別1：（offset/scroll/client寬高）
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 內容寬度（不包含border）
scrollHeight = 內容高度（不包含border）
區別2：（offset/scroll/client上下）
offsetTop/offsetLeft ：
調用者：任意元素。(盒子為主)
嘛作用：距離父系盒子中帶有定位的距離。
scrollTop/scrollLeft:(盒子也可以調用，必須有滾動條)
調用者：document.body.scrollTop/.....(window)
嘛作用：瀏覽器無法顯示的部分（被卷去的部分）。
clientY/clientX:（clientTop/clientLeft 值的是border）
調用者：event.clientX(event)
嘛作用：鼠標距離瀏覽器可視區域的距離（左、上）。
再觸發DOM上的某個事件時，會產生一個事件對象event，這個對象中包含著所有與事件有關的信息。所有瀏覽器都支持event對象，但支持的方式不同。
比如鼠標操作時候，會添加鼠標位置的相關信息到事件對象中。（類似Date）
普通瀏覽器支持 event（傳參）
ie 678 支持 window.event（無參）
Snip20170723_1.png
clientX/clientY
當前窗口的左上角為基準點
pageX/pageY低版本瀏覽器（IE67）不支持
以當前文檔的左上角為基準點
screenX/screenY
當前屏幕的左上角為基準點
