浏览器盒模型

盒子模型是什么鬼？

什么是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移除了这个属性，难道这样判断也失效了吗？希望有知道的朋友可以解惑。