認識CSS的盒子模型

來源:互聯網
上載者:User
css 盒子模型

 

http://lovervz.spaces.msn.com

CSS 中有個重要的概念,就是盒子模式 (Box model)。CSS2中的盒模型是關係到設計中排版定位的關鍵,任何一個選擇符都遵循盒模型規範,例如<div>、<p>、<a>……盒模型包含(外補丁)margin,(背景顏色)background-color,(背景圖片)background-image,(內補丁)padding ,(內容)content,(邊框)border。

是CSS盒模型的:

平面:3D(原圖出自:hicksdesign)

 

盒子裡由外至裡依次是:

  • margin 邊距
  • border 邊框
  • padding 間隙 (也有人稱做補丁)
  • content (內容,比如文本,圖片等)

CSS 邊距屬性 (margin) 是用來設定一個元素所佔空間的邊緣到相鄰元素之間的距離。

CSS 邊框屬性 (border) 用來設定一個元素的邊線。

CSS 間隙屬性 (padding) 是用來設定元素內容到元素邊框的距離。

CSS 背景屬性指的是 content 和 padding 地區。

CSS 屬性中的 width 和 height 指的是 content 地區的寬和高

相關文章

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.