JS盒子模型屬性

• 在JS中通過相關的屬性可以獲取(設置)元素的樣式信息,這些屬性就是盒子模型屬性（基本上都是有關於樣式的）

    <div id="outer">
    <div id="inner">
        <div id="center"></div>
    </div>
    </div>

clientTop/Left/Width/Height

• 1.clientWidth & clientHeight：獲取當前元素可視區域的寬高（內容的寬高+左右/上下PADDING, 和內容是否有溢出無關（和是否設置了OVERFLOW:HIDDEN也無關），就是我們自己設定的內容的寬高+PADDING

獲取當前頁面一屏幕(可視區域)的寬度和高度

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight

• 2.clientTop & clientLeft：獲取(上/左)邊框的寬度

• 3.offsetWidth & offsetHeight：在client的基礎上加上border（和內容是否溢出也沒有關係）

• 4.offsetTop / offsetLeft：獲取當前盒子距離其父級參照物的偏移量(上偏移/左偏移) 當前盒子的外邊框開始~父級參照物的內邊框

• 5.offsetParent：當前盒子的父級參照物
  “參照物”：同一個平面中，元素的父級參照物和結構沒有必然聯繫，預設他們的父級參照物都是BODY（當前平面最外層的盒子） BODY的父級參照物是NULL

center.offsetParent  //=>BODY
inner.offsetParent   //=>BODY
outer.offsetParent   //=>BODY

• 6.scrollWidth & scrollHeight：真實內容的寬高（不一定是自己設定的值，因為可能會存在內容溢出，有內容溢出的情況下，需要把溢出的內容也算上）+ 左/上PADDING，而且是一個約等於的值 （沒有內容溢出和CLIENT一樣）, 在不同瀏覽器中，或者是否設置了OVERFLOW:HIDDEN都會對最後的結果產生影響，所以這個值僅僅做參考，屬於約等於的值

獲取當前頁面的真實寬高（包含溢出的部分）

document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight

• 7.scrollTop / scrollLeft：滾動條捲去的寬度或者高度

  最小捲去值：0
  最大卷去值：真實頁面的高度 - 一屏幕的高度 document.documentElement.scrollHeight-document.documentElement.clientHeight

  在JS盒子模型13個屬性中，只有scrollTop/scrollLeft是“可讀寫”屬性，其餘都是“只讀”屬性

  操作瀏覽器的盒子模型屬性，我們一般都要寫兩套，用來相容各種模式下的瀏覽器