IE盒模型和W3C盒模型的區別

原地址：http://www.cnblogs.com/xiayu25/p/6306790.html

一、css盒模型圖解

1.W3C標準盒子模型

從上圖可以看出，w3c盒子模型的範圍包括margin、border、padding、content,並且content部分不包含其他部分。
2.IE盒子模型

從上圖可以看出，IE盒子模型的範圍包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border.
二、實例加解釋
1.首先我們來看一段代碼：

<style>
    .div1 {
            width: 100px;
            height: 80px;
            border: 10px solid #000;
            padding: 20px;
            background-color: red;
            margin: 50px;
        }
</style>

<div class="div1">
    111
</div>

運行結果：

1).w3c標準瀏覽器下面：

解釋：這個盒模型,如果用標準w3c盒子模型解釋那麼這個盒子需要佔據的位置爲：
寬：100+20*2+10*2+50*2=260px 高：80+20*2+10*2+50*2=240px
盒子的實際大小爲：
寬：100+20*2+10*2=160px 高：80+20*2+10*2=140px

2).IE6以下版本：

解釋：

這個盒模型，如果用IE盒子模型解釋那麼這個盒子需要佔據的位置爲：
寬：100+50*2=200px 高：80+50*2=180px
盒子的實際大小爲：
寬：100px 高：80px


三、總結

IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在標準兼容模式下使用的是W3C的盒模型標準。我們說這是一個好消息因爲這意味着此盒模型問題
只會出現在IE5.5及其更早的版本中。只要爲文檔設置一個DOCTYPE，就會使得IE遵循標準兼容模式的方式工作。
另外，我們現在應該能理解了，css3的box-sizing屬性給了開發者選擇盒模型解析方式的權利。W3C的盒模型方式被稱爲“content-box”，IE的被稱爲“border-box”，使用box-sizing: border-box;就是爲了在設置有padding值和border值的時候不把寬度撐開。
現在去看這篇博客http://www.cnblogs.com/xiayu25/p/6242262.html裏面的關於width()的部分，應該更能理解了。