margin的應用

一、margin的基本特性
margin屬性包括margin-top,margin-right,margin-bottom,margin-left,margin,可以用來設置box的margin area。屬性margin可以用來同時設置box的四邊外邊距,而其他的margin屬性只能設置其自各的外邊距。
margin屬性可以應用于幾乎所有的元素,除了表格顯示類型(不包括 table-caption, table and inline-table)的元素,而且垂直外邊距對非置換內聯元素(non-replaced inline element)不起作用。
或許有朋友對非置換元素(non-replaced element)有點疑惑,稍微幫助大家理解一下。非置換元素,W3C中沒有給出明確的定義,但我們從字面可以理解到,非置換元素對應著置換元素(replaced element),也就是說我們搞懂了置換元素的含義,就懂了非置換元素。置換元素,W3C中給出了定義:
引用:
“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”
從定義中我們可以理解到,置換元素(replaced element)主要是指img,input,textarea,select,object等這類默認就有CSS格式化外表范圍的元素。進而可知,非置換元素(non-replaced element)就是除了img,input,textarea,select,object等置換元素以外的元素。
margin始終是透明的。
二、margin的基本寫法
外邊距的margin-width的值類型有:auto | length | percentage
percentage:百分比是由被應用box的containing block(注:一個元素的containing block是該元素產生的box(es)在計算位置和大小時參考的一個矩形,詳細閱讀可看:《Containing Block》)的大小所決定。對于margin-top和margin-bottom也同樣成立。
margin的默認值為0,并且margin支持負值。
上面我們曾提到屬性margin可以用來同時指定box的四邊外邊距。如果屬性margin有四個值,那么值將按照上-右-下-左的順序作用于四邊,即從元素的上邊開始,按照順時針的順序圍繞元素。表達式如下:
margin:top right bottom left;
四個數值中間以空格分隔。效果等同于:
margin-top:value;
margin-right:value;
margin-bottom:value;
margin-left:value;
并且規范還提供了省略的數值寫法,基本原則如下:
引用:
1.如果沒有left值,則使用right代替;
2.如果沒有bottom值,則使用top代替;
3.如果沒有right值,則使用top值代替。
根據這些基本原則,我們可以有三種省略方式,但不管怎樣省略margin的數值都會大于等于一個,而margin的默認數值是從top開始至left結束,那么對于省略的具體情況,我們可以從left反推理回去。
1.如果margin只有三個值,按照值的順序為margin:top right bottom; 缺少了left,根據原則,則left的值有right來代替。
margin:10px 20px 30px;就等于margin:10px 20px 30px 20px;
2.如果margin只有兩個值,按照值的順序為margin:top right; 缺少了bottom和left,根據原則left的值由right來代替,bottm的值由top來代替。
margin:10px 20px;就等于margin:10px 20px 10px 20px;
3.如果margin只有一個值,按照值的順序為margin:top; 缺少了bottom、left和right,根據原則left的值由right來代替,bottom的值由top來代替,right的值右top來代替,也就是說left的值也由top來代替。
margin:10px;就等于margin:10px 10px 10px 10px;
三、margin的解析邏輯
目前我們已經了解到了margin的基本特性和基本寫法,但對元素margin的基本解析邏輯還是很模糊,到底margin的top、right、bottom、left都是以什么為基準來促使box model形成。為了形象,易懂的對margin的邏輯進行說明,下面講解的過程中,將引入W3C上沒有的參考線的說法。何謂參考線?參考線就是margin移動的基準點,此基準點相對于box是靜止的。而margin的數值,就是box相對于參考線的位移量。
在margin中top、right、bottom、left的參考線并不一致為一類,而是分為了兩類參考線,top和left的參考線屬于一類,right和bottom的參考線屬于另一類。那他們到底各以什么為參考線呢?top以containing block的content上邊或者垂直上方相連元素margin的下邊為參考線垂直向下位移;left以containing block的content左邊或者水平左方相連元素margin的右邊為參考線水平向右位移。right以元素本身的border右邊為參考線水平向右位移;bottom以元素本身的border下邊為參考線垂直向下位移。從上我們可以看到top和left都是以外元素為參考,而right和bottom以本元素為參考。上面的位移方向是指margin數值為正值時候的情形,如果是負值則位移方向相反。


技術文摘

技術文摘
 
  職業室內設計師班(零基礎授課)
  平面設計師班(零基礎授課)
  職業Web前端開發班(零基礎授課)
  職業平面設計師班(零基礎授課)
 
 相關文章:
網頁設計排版技巧
網站的類型
色彩使用技巧
margin的應用

版權所有:北京藝知堂藝術設計工作室 網址:http://www.campamentocurupao.com      咨詢熱線:13552855085    010-56159565
 
 


狼国色人网