css盒模型

css盒子模型是爲了讓咱們充分理解div+css模型的定位功能，盒子模型在學習div+css佈局方式中必需要學習的一個模型。

那什麼是css盒模型呢？

　　網頁設計中常聽到的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)。css盒模型都具有這些屬性。這些屬性和平常生活中盒子的屬性是同樣的。內容就是盒子裏面裝的東西，而填充就是像盒子裏裝的一些反震的材料，邊框就是箱子的自己，邊界呢就像盒子之間的空隙。

盒子的模型有2種，分別是IE盒子模型和標準盒子模型。

IE盒子模型

　　

 

標準盒子模型

 

css如何設置這兩種模型

 

瀏覽器默認的方式是content-box(標準模型 )，經過改變樣式box-sizing來切換content-box(標準模型)和border-sizing(IE模型)

js如何設置獲取盒模型對應的寬和高

有4種方式

第一種：

　　dom.style.width/height

　　缺點:只能獲取內聯樣式中的style值。

第二種：

　　dom.currentStyle.width/height

　　缺點：只能獲取IE瀏覽器下的值。兼容性很差

第三種：

　　window.getComputerStyle(dom).width/height

　　缺點：只能用來獲取不能用來設置改變值

第四種：

　　dom.getBoundingClientRect().width/height

　　優勢：可以用dom.getBoundingClientRect()獲取一個矩形對象，其中包括top,left,right,bottom4個屬性，以及返回的注意（IE盒子模型的寬高）。

說到盒模型這裏不得再也不提到盒模型的邊距重疊。什麼是盒模型的邊距重疊呢？

先看個例子

        .content{
           background: red;
        }
        .child{
            background:#007aff;
            height: 100px;
            margin-top: 20px;
        }

如圖所示，父級元素的顏色沒有顯示出來，顯示的高度是100。重點來了如今給父級元素加上一個屬性overflow:hidden。

如圖所示，content的高度變成120了，這就是邊距重疊。能夠理解成加了一個overflow屬性至關於加了一個BFC,具體能夠參考http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html。