CSS基礎:CSS2盒模型

來源:互聯網
上載者:User
  CSS2盒模型
  CSS2中的盒模型是關係到設計中排版定位的關鍵,任何一個選擇符都遵循盒模型規範,例如<div>、<p>、<a>……盒模型包含(外補丁)margin,(背景顏色)background-color,(背景圖片)background-image,(內補丁)padding ,(內容)content,(邊框)border。下圖是CSS盒模型的示意圖
  平面示意圖
  3D示意圖(原圖出自:hicksdesign)
  Flash示意模型
  需要說明的是:IE和Mozilla瀏覽器對盒模型的解釋不一致,造成我們定位上的困難,主要差別是:
  IE計算2個div之間的距離時候,會把1px的border計算在內,而mozilla沒有; 設定div的寬度後,如果給padding加一個值,IE會在寬度內減去這個值,而M ozilla會在寬度基礎上加上這個值。
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.