CSS2盒模型的3D示意圖

CSS2盒模型的3D示意圖

作者：阿捷 2004-6-25 10:16:14

CSS2中的盒模型是關係到我們排版定位的關鍵，例如<div>就遵循盒模型規範。盒模型定義的margin，background-color，background-image，padding ，content，border，初學者經常會搞不清楚它們之間的層次、關係和相互影響。這裏提供一張盒模型的3D示意圖，希望便於你的理解和記憶。

原圖出自：hicksdesign

需要說明的是：IE和Mozilla瀏覽器對盒模型的解釋不一致，造成我們定位上的困難，主要差別是：

• IE計算2個div之間的距離時候，會把1px的border計算在內，而mozilla沒有；
• 設定div的寬度後，如果給padding加一個值，IE會在寬度內減去這個值，而M ozilla會在寬度基礎上加上這個值。