瀏覽器盒模型

盒子模型是什麼鬼？

什麼是CSS的盒子模式呢？爲何叫它是盒子？先說說咱們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具有這些屬性。

其實我更喜歡叫padding爲內邊距margin爲外邊距。

一個形象的比喻：

把盒子模型比作一個快遞箱子。

content就是箱子裏的東西。

padding就是箱子內的content和箱子邊框border的距離。（固然你須要假設箱子裏的東西是懸浮的）

margin就能夠理解爲這個箱子和相鄰的箱子的距離。兩個箱子的實際距離爲兩個箱子各自的邊距的和。

 

標準盒子和IE盒子

 

上面其實還漏掉了一個offset，下面是實際六拉起的盒子模型截圖：

 

標準盒子模型：offset=width+padding+border

IE盒子模型:offset=width+padding+border+margin

可是這裏有一個問題，測試時候發現每一個IE產生的值都不同，有些奇葩的值讓我都不知道爲何~表示略蛋疼。

問我爲何有IE盒子模型？我只想說這都是微軟造孽啊！！！！

 

怎麼知道瀏覽器用什麼盒子模型？

一般狀況下，使用 標準盒子模型能作到更好的兼容性，比較 微軟本身搞一套的標準除了他本身沒別人用了。

IE的瀏覽器都用IE盒子模型麼？

首先先了解下<!DOCTYPE>這個東西。傳送門

已知這個標籤能夠控制瀏覽器如何解釋頁面的。也通用能夠控制頁面是用怪異模式仍是標準模式解析。

看看Jquey是如何判斷的：

// Construct the test element
        div = document.createElement("div");
        container.appendChild( div );

        // Check if table cells still have offsetWidth/Height when they are set
        // to display:none and there are still other visible table cells in a
        // table row; if so, offsetWidth/Height are not reliable for use when
        // determining if an element has been hidden directly using
        // display:none (it is still safe to use offsets if a parent element is
        // hidden; don safety goggles and see bug #4512 for more information).
        // (only IE 8 fails this test)
        div.innerHTML = "<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>";
        tds = div.getElementsByTagName( "td" );
        isSupported = ( tds[ 0 ].offsetHeight === 0 );

        tds[ 0 ].style.display = "";
        tds[ 1 ].style.display = "none";

        // Check if empty table cells still have offsetWidth/Height
        // (IE <= 8 fail this test)
        support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );

        // Figure out if the W3C box model works as expected
        div.innerHTML = "";
        div.style.width = div.style.paddingLeft = "1px";
        jQuery.boxModel = support.boxModel = div.offsetWidth === 2;

奇怪的是1.8之後Jquery移除了這個屬性，難道這樣判斷也失效了嗎？但願有知道的朋友能夠解惑。