一。JS盒子模型指的是通過JS中提供的一系列的屬性和方法，獲取頁面中元素的樣式信息值
<script type="text/javascript">
var box = document.getElementById("box");
console.dir(box);
</script>#box（有很多自己的私有屬性）->
HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype
-> Node.prototype ->
EventTarget.prototype -> Object.prototype
以下面這個盒子作爲例子瞭解一下JS中的盒子模型：
內容的寬度和高度：我們設置的 width / height 這兩個樣式就是內容的寬和高；如果沒有設置height的值，容器的高度會更具裏面內容多少自己進行適應，這樣獲取的值就是真實內容的高；如果固定的高度了，無論內容的多了還是少了，其實我們的內容的高度都是設定的那個值
真實內容的寬度和高度：這個代指的是實際內容的寬高（和我們設置的height沒有必然的聯繫），例如：我們設置的高度爲200px，如果內容有溢出，那麼真實內容的高度就是把溢出內容的高度也要加進來的
（當前元素的幾個私有的屬性）
1.client系列
-> clientWidth / clientHeight : 內容的寬度 / 高度 + 左右 / 上下填充padding
-> clientLeft / clientTop : 左 邊框的寬度 / 上邊框的高度 （border [ Left / Top ] Width）
2.offset系列
-> offsetWidth / offsetHeight : clientWidth / clientHeight + 左右 / 上下邊框border
-> offsetParent：當前元素的富集參照物
-> offsetLeft / offsetTop：當前元素的外邊框距離富集參照物的內邊框的偏移量
3.scroll系列
-> scrollWidth / scrollHeight ：和我們的clientWidth / clientHeight 一模一樣（前提是：容器中的內容沒有溢出的情況下）
-> 如果容器中的內容有溢出，我們獲取的結果是如下規則：
scrollWidth ：真實內容的寬度（包含溢出） + 左填充padding-left
scrollHeight：真實內容的高度（包含溢出） + 上填充padding-top
-> 獲取到的結果都是“約等於”的值，因爲：同一個瀏覽器，我們是否設置overflow: hidden; 對於最終的結果石油影響的，在不同的瀏覽器中我們取到的結果也是不同的
-> scrollLeft / scrollTop：滾動條捲去的寬度 / 高度
二。關於JS合作司模型屬性取值的問題
我們通過這13個屬性值獲取到的結果永遠不可能出現小數，都是整數；瀏覽器獲取結果的時候，在原來真實結果的基礎上進行四捨五入
三。關於操作瀏覽器本身的盒子模型信息
-> clientWidth / clientHeight 是當前瀏覽器可視窗口的寬度和高度（一屏幕的寬度和高度）
-> scrollWidth / scrollHeight 是當前頁面的真實寬度和高度（所有屏加起來的寬度和高度，但是是一個約等於的值）
-> 我們不管哪些屬性，也不管是什麼瀏覽器，也不管是獲取還是設置，想要兼容的話，就需要寫兩套
document.documentElement[attr] || document.body[attr] -> 必須document.documentElement在前面
-> 例如：
[獲取]
document.documentElement.clientWidth || document.body.clientWidth
[設置也需要寫兩套]
document.documentElement.clientWidth = 0；
document.body.clientWidth = 0；
爲了方便，編寫一個關於操作瀏覽器盒子模型的方法win
如果只傳遞了attr沒有傳遞value，默認的意思就是“獲取”
如果兩個參數都傳遞了，意思就是“設置”
不嚴謹的說，這就是有關於“類的重載”，同一個方法，通過傳遞參數的不同實現了不同的功能
<script type="text/javascript">
var box = document.getElementById("box");
console.dir(box);
function win(attr,value) {
if(typeof value === "undefined"){//->沒有傳遞value值=“獲取”
return document.documentElement[attr] || document.body[attr];
}
//“設置”
document.documentElement[attr] = value;
document.body[attr] = value;
}
</script>
