JavaScript盒子模型，指的是通過JavaScript中提供的一系列的屬性和方法着饥，獲取頁面中元素的樣式信息值。
**內(nèi)容的寬度和高度: **設(shè)置的width/height這兩個(gè)樣式就是內(nèi)容的寬和高花椭，如果沒有設(shè)置height值莹痢，容器的高度會(huì)根據(jù)里面的內(nèi)容進(jìn)行自適應(yīng)，這樣獲取的值就是真實(shí)的內(nèi)容的高; 如果設(shè)置了固定的高度了鞠值，不管內(nèi)容是多了還是少了媚创，其實(shí)我們內(nèi)容的高度指的都是設(shè)定的那個(gè)值。
真實(shí)內(nèi)容的寬度和高度: 這個(gè)代指的是實(shí)際內(nèi)容的寬高彤恶，和自己設(shè)置的width/height沒有必然的聯(lián)系钞钙。例如: 設(shè)置高度為200px，如果內(nèi)容有溢出粤剧，那么真實(shí)內(nèi)容的高度是要把溢出的內(nèi)容寬高也要加進(jìn)去歇竟。
client系列 (當(dāng)前元素的幾個(gè)私有屬性)
clientWidth/ clientHeight: 內(nèi)容的寬/高+左右/上下padding，和內(nèi)容溢出是沒有關(guān)系的抵恋。
clientLeft: 左邊框的寬度;
clientTop: 上邊框的高度 (borderLeftWidth/ borderTopWidth)焕议。
offset系列
offsetWidth/ offsetHeight: clientWidth/clientHeight + 左右/上下邊框，和內(nèi)容溢出無關(guān)弧关。
offsetParent: 當(dāng)前元素的父級參照物盅安。
offsetTop/ offsetLeft: 當(dāng)前元素的外邊框距離父級參照物內(nèi)邊框的偏移量。
scroll系列
scrollWidth/ scrollHeight: 和clientWidth/ clientHeight一模一樣世囊，其前提: 容器的內(nèi)容沒有溢出别瞭。
如果容器中的內(nèi)容有溢出，獲取的結(jié)果是如下規(guī)則:
1). scrollWidth: 真實(shí)內(nèi)容的寬度(包含溢出) + 左padding株憾。
2). scrollHeight: 真實(shí)內(nèi)容的高度(包含溢出) + 上padding蝙寨。
獲取到的結(jié)果都是約等于的值, 因?yàn)? 同一個(gè)瀏覽器, 是否設(shè)置overflow='hidden'對于最終的結(jié)果是有影響的; 在不同的瀏覽器中，獲取到的結(jié)果也是不相同的嗤瞎。
scrollLeft/ scrollTop: 滾動(dòng)條卷去的寬度/高度墙歪。
關(guān)于JavaScript盒子模型屬性取值的問題
通過這13個(gè)屬性值獲取的結(jié)果永遠(yuǎn)不可能出現(xiàn)小數(shù)，都是整數(shù); 瀏覽器在獲取結(jié)果的時(shí)候, 會(huì)在原來真實(shí)的結(jié)果上進(jìn)行四舍五入贝奇。
關(guān)于操作瀏覽器本身的盒子模型信息
clientWidth/ clientHeight: 是當(dāng)前瀏覽器可視窗口(一屏幕的)的寬度和高度虹菲。
scrollWidth/ scrollHeight: 是當(dāng)前頁面的實(shí)際寬度和高度(所有屏加起來的寬度和高度), 這些是約等于的值。
不管哪些屬性掉瞳，也不管是什么瀏覽器毕源，也不管是獲取還是設(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;
編寫一個(gè)有關(guān)于操作瀏覽器盒子模型的方法
// win: 編寫一個(gè)有關(guān)于操作瀏覽器盒子模型的方法
// 如果值傳遞了attr, 沒有傳遞value, 默認(rèn)的意識(shí)是獲取樣式值瘩欺。
// 如果兩個(gè)參數(shù)都傳遞了, 意思是設(shè)置某一個(gè)樣式屬性的值必盖。
function win(attr, value) {
if (typeof value === 'undefined') { // 說明沒有傳遞value
return document.documentElement[attr] || document.body[attr];
}
document.documentElement[attr] = value;
document.body[attr] = value;
}
