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

**內(nèi)容的寬度和高度: **設(shè)置的width/height這兩個樣式就是內(nèi)容的寬和高，如果沒有設(shè)置height值，容器的高度會根據(jù)里面的內(nèi)容進行自適應(yīng)，這樣獲取的值就是真實的內(nèi)容的高; 如果設(shè)置了固定的高度了，不管內(nèi)容是多了還是少了，其實我們內(nèi)容的高度指的都是設(shè)定的那個值。
真實內(nèi)容的寬度和高度: 這個代指的是實際內(nèi)容的寬高，和自己設(shè)置的width/height沒有必然的聯(lián)系。例如: 設(shè)置高度為200px，如果內(nèi)容有溢出，那么真實內(nèi)容的高度是要把溢出的內(nèi)容寬高也要加進去。

client系列 (當前元素的幾個私有屬性)
clientWidth/ clientHeight: 內(nèi)容的寬/高+左右/上下padding，和內(nèi)容溢出是沒有關(guān)系的。
clientLeft: 左邊框的寬度;
clientTop: 上邊框的高度 (borderLeftWidth/ borderTopWidth)。

offset系列
offsetWidth/ offsetHeight: clientWidth/clientHeight + 左右/上下邊框，和內(nèi)容溢出無關(guān)。
offsetParent: 當前元素的父級參照物。
offsetTop/ offsetLeft: 當前元素的外邊框距離父級參照物內(nèi)邊框的偏移量。

scroll系列
scrollWidth/ scrollHeight: 和clientWidth/ clientHeight一模一樣，其前提: 容器的內(nèi)容沒有溢出。
如果容器中的內(nèi)容有溢出，獲取的結(jié)果是如下規(guī)則:
1). scrollWidth: 真實內(nèi)容的寬度(包含溢出) + 左padding。
2). scrollHeight: 真實內(nèi)容的高度(包含溢出) + 上padding。
獲取到的結(jié)果都是約等于的值, 因為: 同一個瀏覽器, 是否設(shè)置overflow='hidden'對于最終的結(jié)果是有影響的; 在不同的瀏覽器中，獲取到的結(jié)果也是不相同的。
scrollLeft/ scrollTop: 滾動條卷去的寬度/高度。

關(guān)于JavaScript盒子模型屬性取值的問題
通過這13個屬性值獲取的結(jié)果永遠不可能出現(xiàn)小數(shù)，都是整數(shù); 瀏覽器在獲取結(jié)果的時候, 會在原來真實的結(jié)果上進行四舍五入。

關(guān)于操作瀏覽器本身的盒子模型信息
clientWidth/ clientHeight: 是當前瀏覽器可視窗口(一屏幕的)的寬度和高度。
scrollWidth/ scrollHeight: 是當前頁面的實際寬度和高度(所有屏加起來的寬度和高度), 這些是約等于的值。
不管哪些屬性，也不管是什么瀏覽器，也不管是獲取還是設(shè)置，想要都兼容，需要寫兩套:
document.documentElement[attr]||document.body[attr]; 必須document.documentElement在前。
設(shè)置，獲取都要寫兩套。

    document.documentElement.clientWidth || document.body.clientWidth;
    document.documentElement.scrollTop || document.body.scrollTop;
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;

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

    // win: 編寫一個有關(guān)于操作瀏覽器盒子模型的方法
    // 如果值傳遞了attr, 沒有傳遞value, 默認的意識是獲取樣式值。
    // 如果兩個參數(shù)都傳遞了, 意思是設(shè)置某一個樣式屬性的值。
    function win(attr, value) {
        if (typeof value === 'undefined') { // 說明沒有傳遞value
            return document.documentElement[attr] || document.body[attr];
        }

        document.documentElement[attr] = value;
        document.body[attr] = value;
    }