JS盒子模型指的是通過JS中提供的一系列的屬性和方法，獲取頁面中元素的樣式信息值

client系列/offset系列/scrollWidth/scrollHeight都是“只讀”屬性：只能通過屬性獲取值，不能通過屬性修改元素的樣式

1、client系列(當(dāng)前元素的幾個私有屬性）

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：當(dāng)前元素的父級參照物。在同一個平面中，最外層的元素是里面所有元素的父級參照物（和HTML層級結(jié)構(gòu)沒有必然的聯(lián)系）。一般來說一個頁面中所有元素的父級參照物都是body。
想要改變父級參照物：需要通過position定位來進行改變：absolute、relative、fixed任意一個值都可以把父級參照物進行修改

offsetLeft/offsetTop：當(dāng)前元素的外邊框距離父級參照物的內(nèi)邊框的偏移量

image.png

//函數(shù)offset:實現(xiàn)獲取頁面中任意一個元素，距離body的偏移（包含左偏移和上偏移），不管當(dāng)前父級參照物是誰。等同于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è)置的值超過邊界值都沒用，起到效果的依然是邊界值。最小值：是零，直接回到容器頂部，沒有超出。最大值：真實的高度-當(dāng)前容器一屏幕的高度（div.scrollHeight - div.clientHeight）
————————————————————————————————

關(guān)于JS盒子模型屬性取值的問題

通過以上13個屬性值獲取的結(jié)果永遠不可能出現(xiàn)小數(shù)，都是整數(shù)；瀏覽器獲取結(jié)果的時候，在原來真實結(jié)果的基礎(chǔ)上進行四舍五入

關(guān)于操作瀏覽器本身的盒子模型信息

clientWidth/clientHeight是當(dāng)前瀏覽器可視窗口的寬度和高度（一屏幕的寬度和高度）

scrollWidth/scrollHeight是當(dāng)前頁面的真實寬度和高度（所有屏加起來的寬度和高度，但是是一個約等于的值）

不管哪些屬性，也不管是什么瀏覽器，也不管是獲取還是設(shè)置，想要都兼容的話，需要寫兩套：
document.documentElement [attr] || document.body. [attr]; (必須document.documentElement 在前)
————————————————————————————————

編寫一個有關(guān)于操作瀏覽器盒子模型的方法

如果只傳遞了attr沒有傳遞value，默認意思是“獲取”；如果兩個參數(shù)都傳遞了，意思是“設(shè)置”。（不嚴(yán)謹?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;
}