由淺入深漫談margin屬性

來源:互聯網
上載者:User

margin在中文中我們翻譯成外邊距或者外補白(本文中引用外邊距)。他是元素盒模型(box model)的基礎屬性。

一、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數值為正值時候的情形,如果是負值則位移方向相反。

或許理論聽起來比較枯燥,我們舉例說明一下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
div {width:200px; height:200px; background:#ccc;}
</style>
</head>

<body>
  <div>外邊距的margin-width的實值型別有:auto | length | percentage</div>
</body>
</html>

如上代碼,很簡單,為了方便我們看到效果,我們給div設定了寬度和高度以及背景色。

現在我們給div的樣式加上margin屬性,比如:

margin:-10px 20px -30px 40px;

這時候margin的解析邏輯是怎樣的呢?首先我們要搞清div的和周邊元素的關係,div沒有相連元素,而此時div的containing block是body產生的block box。則根據上面介紹的輔助線原理,div的左外邊距以containing block的content左邊為輔助線,及此時以body的content左邊為輔助線進行水平向右位移,位移的大小為40px,同理,上邊距以body的content上邊為輔助線進行垂直向上位移10px(負值和正值的方向相反),下邊距依照現在div的borer下邊(此時的div已經經過上邊距位移過了)垂直向上位移30px(此時,margin不會改變box的border內的物理大小,但會改變box的邏輯大小,即:以此box的margin的下邊為參考的元素,不是從box的物理位置開始的,而是從邏輯位置開始),右邊距依照現在div的borer右邊(此時的div已經經過左邊距位移過了)水平向右位移20px。或許有朋友問你分析的順序怎麼和margin運算式中出現的順序不一樣?如果按照margin運算式中出現的順序來分析,結果是一樣的,只是為了更好的方便大家的理解而沒有按照運算式的順序來分析。

用margin最後的顯示大小到底是怎麼樣的,或許有朋友也比較疑惑,我暫時用邏輯大小和物理大小來區分(其實上面已用到此概念),到底什麼是邏輯大小,什麼是物理大小呢?!具體可以看圖,物理大小指的是除去margin,也就是包含border以內的box大小,而邏輯大小,則是box通過margin解析規則解析後得到的大小(這或許可以解釋為什麼IE5會錯誤解析盒模型),當邏輯大小小於物理大小時,則不會影響實際box的顯示,也就是說,此時顯示的是box的物理大小,而當邏輯大小大於物理大小時,則此時顯示邏輯大小。這僅對元素本身有效,對於其他相關元素,他們則只以margin的邏輯大小為準則,進行布局。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。