網域查詢: www.
返回首頁

CSS2盒模型的3D示意圖

時間:2010-02-11 06:09來源: 作者: 點擊:
CSS2中的盒模型是關系到我們排版定位的關鍵,例如div就遵循盒模型規範。盒模型定義的margin,background-color,background-image,padding ,content,border,初學者經常會搞不清楚它們之間的層次
  

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

CSS2盒模型的3D示意圖

原圖出自︰hicksdesign

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

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

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
最新評論 查看所有評論
發表評論 查看所有評論
請自覺遵守互聯網相關的政策法規,嚴禁發佈色情、暴力、反動的言論。
評價:
表情:
用戶名: 密碼: 驗證碼:
推薦內容