深刻理解CSS盒模型

深刻理解CSS盒模型 下面本文章將會從如下幾個方面談談盒模型。

基本概念：標準模型 和IE模型 CSS如何設置這兩種模型 JS如何設置獲取盒模型對應的寬和高 實例題（根據盒模型解釋邊距重疊） BFC（邊距重疊解決方案）

基本概念 盒模型的組成你們確定都懂，由裏向外content,padding,border,margin.

盒模型是有兩種標準的，一個是標準模型，一個是IE模型. 在標準模型中，盒模型的寬高只是內容（content）的寬高，

而在IE模型中盒模型的寬高是內容(content)+填充(padding)+邊框(border)的總寬高。

JS獲取寬高 經過JS獲取盒模型對應的寬和高，有如下幾種方法：

爲了方便書寫，如下用dom來表示獲取的HTML的節點。

1. dom.style.width/height

  這種方式只能取到dom元素內聯樣式所設置的寬高，也就是說若是該節點的樣式是在style標籤中或外聯的CSS文件中設置的話，經過這種方法是獲取不到dom的寬高的。

2. dom.currentStyle.width/height

  這種方式獲取的是在頁面渲染完成後的結果，就是說無論是哪一種方式設置的樣式，都能獲取到。

  但這種方式只有IE瀏覽器支持。

3. window.getComputedStyle(dom).width/height

  這種方式的原理和2是同樣的，這個能夠兼容更多的瀏覽器，通用性好一些。

4. dom.getBoundingClientRect().width/height

  這種方式是根據元素在視窗中的絕對位置來獲取寬高的

5.dom.offsetWidth/offsetHeight

  這個就沒什麼好說的了，最經常使用的，也是兼容最好的。