JSjs進階--之JS三大家族：offset家族 Scroll家族 client家族
1.1 三大家族和一個事件對象
三大家族（offset/scroll/client）
事件對象/event （事件被觸動時，鼠標和鍵盤的狀態）（通過屬性控制）
1.2 Offset家族簡介
offset這個單詞本身是--偏移，補償，位移的意思。
js中有一套方便的獲取元素尺寸的辦法就是offset家族；
offsetWidth和offsetHight以及offsetLeft和offsetTop以及offsetParent
共同組成了offset家族。
1.2.1 offsetWidth和offsetHight （檢測盒子自身寬高+padding+border）
這兩個屬性，他們綁定在了所有的節點元素上。獲取之後，只要調用這兩個屬性，我們就能夠獲取元素節點的寬和高。
offset寬/高 = 盒子自身的寬/高 + padding+border；
offsetWidth =width+padding+border；
offsetHeight =Height+padding+border；
1.2.2 offsetLeft和offsetTop （檢測距離父盒子有定位的左/上面的距離）
返回距離上級盒子（帶有定位）左邊s的位置
如果父級都沒有定位則以body為準
offsetLeft 從父親的padding 開始算,父親的border 不算。
在父盒子有定位的情況下，offsetLeft == style.left(去掉px)
1.2.3 offsetParent （檢測父系盒子中帶有定位的父盒子節點）
1、返回改對象的父級 （帶有定位）
如果當前元素的父級元素沒有進行CSS定位 （position為absolute或 relative，fixed）， offsetParent為body。
2、如果當前元素的父級元素中有CSS定位 （position為absolute或 relative，fixed）， offsetParent取最近的那個父級元素。
1.3 offsetLeft和style.left區別
一、最大區別在於offsetLeft可以返回沒有定位盒子的距離左側的位置。
而 style.left不可以
二、offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。
三、offsetTop 只讀，而 style.top 可讀寫。（只讀是獲取值，可寫是賦值）
四、如果沒有給 HTML 元素指定過 top 樣式，則style.top 返回的是空字符串。
style.left在=的左邊和右邊還不一樣。（左邊的時候是屬性，右邊的時候是值）
Scroll家族組成
ScrollWidth和scrollHeight（不包括border）
檢測盒子的寬高。（調用者：節點元素。屬性。）
盒子內容的寬高。（如果有內容超出了，顯示內容的高度）
IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
scrollLeft和scrollTop
網頁，被瀏覽器遮擋的頭部和左邊部分。
被卷去的頭部和左邊部分。
兼容性問題
一、未聲明 DTD（谷歌只認識他）
document.body.scrollTop
二、已經聲明DTD（IE678只認識他）
document.documentElement.scrollTop
三、火狐/谷歌/ie9+以上支持的
window.pageYOffset
兼容寫法
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var aaa = document.documentElement.scrollTop + document.body.scrollTop;事件event
1.1 事件對象的獲取（event的獲取）
IE678中，window.event
在火狐谷歌中，event或者，在事件綁定的函數中，加參，這個參數就是event.
Box.onclick = function (aaa){ aaa就是event }
1.2 兼容獲取方式有兩種：
不寫參數直接使用event;
寫參數，但是為event....var event = event || window.event;(主要用這種)
1.3 event內容重要內容
PageY/pageX: 鼠標位於整個網頁頁面的頂部和左側部分的距離。（頁面）
ScreenY/screenX: 鼠標位於屏幕的上方和左側的距離。（屏幕）
ClientX/clientY: 鼠標位於瀏覽器的左側和頂部的距離。（瀏覽器大小和位置）
1.1 PageY和pageX的兼容寫法（很重要）
在頁面位置就等於 = 看得見的+看不見的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
client家族
1.1 主要成員
1、clientWidth 獲取網頁可視區域寬度（兩種用法）
clientHeight 獲取網頁可視區域高度（兩種用法）
調用者不同，意義不同：
盒子調用： 指盒子本身。
body/html調用： 可視區域大小。
2、clientX 鼠標距離可視區域左側距離（event調用）
clientY 鼠標距離可視區域上側距離（event調用）
3、clientTop/clientLeft 盒子的border寬高
1.2 三大家族區別（三大家族總結）
1.2.1 Width和height
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 內容寬度（不包含border）width + padding
scrollHeight = 內容高度（不包含border）
1.2.2 top和left
offsetTop/offsetLeft：
調用者：任意元素。(盒子為主)
嘛作用：距離父系盒子中帶有定位的距離。
scrollTop/scrollLeft:(盒子也可以調用，必須有滾動條)
調用者：document.body.scrollTop/.....(window)
嘛作用：瀏覽器無法顯示的部分（被卷去的部分）。
clientY/clientX:（clientTop/clientLeft 值的是border）
調用者：event.clientX(event)
嘛作用：鼠標距離瀏覽器可視區域的距離（左、上）。
// width和height
// offset帶border
// scroll不帶border，內容的寬高
// client不帶border
// top和left
// offset距離父系盒子帶有定位的盒子之間的距離
// scroll被卷去的部分的距離
// clientborder的寬高
//clientX和clientY
// event調用，鼠標距離瀏覽器的可視區域的距離
1.3 client家族特殊用法之:檢瀏覽器寬/高度(可視區域)
1.4 Onresize事件
只要瀏覽器的大小改變，哪怕1像素，都會觸動這個事件。
1.5 案例：根據瀏覽器可視區域大小，給定背景色
1.6 事件總結
區分：
1.window.onscroll 屏幕滑動
2.window.onresize 瀏覽器大小變化
3.window.onload 頁面加載完畢
4.div.onmousemove 鼠標在盒子上移動
（註意：不是盒子移動！！！）
5.onmouseup/onmousedown == onclick
1.7 獲得屏幕寬高
window.screen.width
分辨率是屏幕圖像的精密度，指顯示器所能顯示的像素有多少。
我們的電腦一般：
橫向1280個像素點，
縱向960個像素點。
我們看電影的時候是滿屏和半屏的，就是這。
JSjs進階--之JS三大家族：offset家族 Scroll家族 client家族