CSS2盒模型的3D示意圖_網站重構教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
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會在寬度基礎上加上這個值。
相關網站重構教程:
- 相關鏈接:
- 教程說明:
網站重構教程-CSS2盒模型的3D示意圖
。
