JS盒子模型指的是通過JS中提供的一系列的屬性和方法辖试，獲取頁面中元素的樣式信息值
client系列/offset系列/scrollWidth/scrollHeight都是“只讀”屬性：只能通過屬性獲取值，不能通過屬性修改元素的樣式
1坑填、client系列(當前元素的幾個私有屬性）
clientWidth/clientHeight：內(nèi)容的寬度/高度+左右/上下填充padding（和內(nèi)容溢出無關(guān)）
clientLeft：左邊框的寬度
clientTop：上邊框的高度 （border [left/top] Width）
2、offset系列
offsetWidth/offsetHeight：clientWidth/clientHeight+左右/上下邊框border（和內(nèi)容溢出也沒有任何關(guān)系）
offsetParent：當前元素的父級參照物废恋。在同一個平面中舅踪，最外層的元素是里面所有元素的父級參照物（和HTML層級結(jié)構(gòu)沒有必然的聯(lián)系）绕沈。一般來說一個頁面中所有元素的父級參照物都是body。
想要改變父級參照物：需要通過position定位來進行改變：absolute融蹂、relative旺订、fixed任意一個值都可以把父級參照物進行修改
offsetLeft/offsetTop：當前元素的外邊框距離父級參照物的內(nèi)邊框的偏移量
//函數(shù)offset:實現(xiàn)獲取頁面中任意一個元素，距離body的偏移（包含左偏移和上偏移）超燃，不管當前父級參照物是誰区拳。等同于jQuery中的offset方法
//獲取的結(jié)果是一個對象{left：距離body的左偏移，top：距離body的上偏移}
function offset(curEle){
var left=null,top=null,par=curEle.offsetParent;
//先把自己本身的進行累加
left+=curEle.offsetLeft;
top+=curEle.offsetTop;
//只要沒有找到body意乓，就把父級參照物的邊框和偏移也進行累加
while(par){
//累加父級參照物本身的邊框
left+=par.clientLeft;
top+=par.clientTop;
//累加父級參照物本身的偏移
left+=par.offsetLeft;
top+=par.offsetTop;
par=par.offsetParent;
}
return {left:left,top:top};
}
3樱调、scroll系列
scrollWidth/scrollHeight：和clientWidth/clientHeight一模一樣（前提是：容器中的內(nèi)容沒有溢出的情況下）。
如果容器中的內(nèi)容有溢出，獲取的結(jié)果是如下規(guī)則：
scrollWidth:真實內(nèi)容的寬度（包含溢出）+左填充
scrollHeight:真實內(nèi)容的高度（包含溢出）+上填充
獲取到的結(jié)果都是約等于的值本涕，因為：同一個瀏覽器业汰，是否設(shè)置overflow=“hidden”對于最終的結(jié)果是有影響的；在不同的瀏覽器中我們獲取到的結(jié)果也是不相同的
scrollLeft/scrollTop：滾動條卷去的寬度/高度（這兩個屬性是唯一“可讀寫”屬性）
scrollTop存在邊界值（最小值和最大值）菩颖，自己設(shè)置的值超過邊界值都沒用样漆，起到效果的依然是邊界值。最小值：是零晦闰，直接回到容器頂部放祟，沒有超出。最大值：真實的高度-當前容器一屏幕的高度（div.scrollHeight - div.clientHeight）
————————————————————————————————
關(guān)于JS盒子模型屬性取值的問題
通過以上13個屬性值獲取的結(jié)果永遠不可能出現(xiàn)小數(shù)呻右，都是整數(shù)跪妥；瀏覽器獲取結(jié)果的時候，在原來真實結(jié)果的基礎(chǔ)上進行四舍五入
關(guān)于操作瀏覽器本身的盒子模型信息
clientWidth/clientHeight是當前瀏覽器可視窗口的寬度和高度（一屏幕的寬度和高度）
scrollWidth/scrollHeight是當前頁面的真實寬度和高度（所有屏加起來的寬度和高度声滥，但是是一個約等于的值）
不管哪些屬性眉撵，也不管是什么瀏覽器，也不管是獲取還是設(shè)置落塑，想要都兼容的話纽疟，需要寫兩套：
document.documentElement [attr] || document.body. [attr]; (必須document.documentElement 在前)
————————————————————————————————
編寫一個有關(guān)于操作瀏覽器盒子模型的方法
如果只傳遞了attr沒有傳遞value，默認意思是“獲取”憾赁；如果兩個參數(shù)都傳遞了污朽，意思是“設(shè)置”。（不嚴謹?shù)恼f這是有關(guān)于“類的重載”：同一個方法龙考，通過傳遞參數(shù)不同實現(xiàn)了不同的功能）
function win(attr,value){
if(typeof value==="undefined"){ //沒有傳遞value值蟆肆，即獲取
return document.documentElement[attr] || document.body[attr];
}
//--->“設(shè)置”
document.documentElement[attr]=value;
document.body[attr]=value;
}
