IE盒模型與W3C盒模型區別

前兩天被人問到，叫我解釋一下標准盒模型與IE盒模型，額，當時只能說，知道一點，但是沒有深入的去探討過，所以下來之后就自己寫了例子，親自去驗證並且查看了網上的一些資料，現將其整理如下：

一、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()的部分，應該更能理解了。