一、css盒模型圖解
1.W3C標准盒子模型
從上圖可以看出，w3c盒子模型的范圍包括margin、border、padding、content,並且content部分不包含其他部分。
2.IE盒子模型
從上圖可以看出，IE盒子模型的范圍包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border.
三、總結
IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在標准兼容模式下使用的是W3C的盒模型標准。我們說這是一個好消息因為這意味着此盒模型問題
只會出現在IE5.5及其更早的版本中。只要為文檔設置一個DOCTYPE，就會使得IE遵循標准兼容模式的方式工作。
另外，我們現在應該能理解了，css3的box-sizing屬性給了開發者選擇盒模型解析方式的權利。W3C的盒模型方式被稱為“content-box”，IE的被稱為“border-box”，使用box-sizing: border-box;就是為了在設置有padding值和border值的時候不把寬度撐開。