DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> margin屬性的基本寫法和特征(2)
margin屬性的基本寫法和特征(2)
編輯:CSS詳解     

二、margin的基本寫法

外邊距的margin-width的值類型有:auto|length|percentage

percentage:百分比是由被應用box的containingblock(注:一個元素的containingblock是該元素產生的box(es)在計算位置和大小時參考的一個矩形,詳細閱讀可看:《ContainingBlock》)的大小所決定。對於margin-top和margin-bottom也同樣成立。

margin的默認值為0,並且margin支持負值。

上面我們曾提到屬性margin可以用來同時指定box的四邊外邊距。如果屬性margin有四個值,那麼值將按照上-右-下-左的順序作用於四邊,即從元素的上邊開始,按照順時針的順序圍繞元素。表達式如下:

  1. margin:toprightbottomleft;

四個數值中間以空格分隔。效果等同於:

  1. margin-top:value;
  2. margin-right:value;
  3. margin-bottom:value;
  4. margin-left:value;

並且規范還提供了省略的數值寫法,基本原則如下:

◆引用:

1.如果沒有left值,則使用right代替;

2.如果沒有bottom值,則使用top代替;

3.如果沒有right值,則使用top值代替。

根據這些基本原則,我們可以有三種省略方式,但不管怎樣省略margin的數值都會大於等於一個,而margin的默認數值是從top開始至left結束,那麼對於省略的具體情況,我們可以從left反推理回去。

1.如果margin只有三個值,按照值的順序為margin:toprightbottom;缺少了left,根據原則,則left的值有right來代替。

margin:10px20px30px;就等於margin:10px20px30px20px;

2.如果margin只有兩個值,按照值的順序為margin:topright;缺少了bottom和left,根據原則left的值由right來代替,bottm的值由top來代替。

margin:10px20px;就等於margin:10px20px10px20px;

3.如果margin只有一個值,按照值的順序為margin:top;缺少了bottom、left和right,根據原則left的值由right來代替,bottom的值由top來代替,right的值右top來代替,也就是說left的值也由top來代替。

margin:10px;就等於margin:10px10px10px10px;

【編輯推薦】

  1. 由淺入深學習margin屬性用法和特征
  2. IE6.0對padding的解讀分析
  3. DIV+CSS網頁錯位診斷和解決方法
  4. CSS margin 屬性定義和用法
  5. 技術分享 如何使用CSS控制超鏈接文字樣式
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved