DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 由淺入深學習margin屬性用法和特征(3)
由淺入深學習margin屬性用法和特征(3)
編輯:CSS詳解     

三、margin的解析邏輯

目前我們已經了解到了margin的基本特性和基本寫法,但對元素margin的基本解析邏輯還是很模糊,到底margin的top、right、bottom、left都是以什麼為基准來促使boxmodel形成。為了形象,易懂的對margin的邏輯進行說明,下面講解的過程中,將引入W3C上沒有的參考線的說法。何謂參考線?參考線就是margin移動的基准點,此基准點相對於box是靜止的。而margin的數值,就是box相對於參考線的位移量。

margin中top、right、bottom、left的參考線並不一致為一類,而是分為了兩類參考線,top和left的參考線屬於一類,right和bottom的參考線屬於另一類。那他們到底各以什麼為參考線呢?top以containingblock的content上邊或者垂直上方相連元素margin的下邊為參考線垂直向下位移;left以containingblock的content左邊或者水平左方相連元素margin的右邊為參考線水平向右位移。right以元素本身的border右邊為參考線水平向右位移;bottom以元素本身的border下邊為參考線垂直向下位移。從上我們可以看到top和left都是以外元素為參考,而right和bottom以本元素為參考。上面的位移方向是指margin數值為正值時候的情形,如果是負值則位移方向相反。

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

  1. "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
  2. <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
  3. <head>
  4. <metahttp-equivmetahttp-equiv="Content-Type"content="text/Html;charset=utf-8"/>
  5. <title>無標題文檔title>
  6. <styletypestyletype="text/CSS">
  7. div{width:200px;height:200px;background:#ccc;}
  8. style>
  9. head>
  10. <body>
  11. <div>外邊距的margin-width的值類型有:auto|length|percentagediv>
  12. body>
  13. Html>

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

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

margin:-10px20px-30px40px;

◆這時候margin的解析邏輯是怎樣的呢?

首先我們要搞清div的和周邊元素的關系,div沒有相連元素,而此時div的containingblock是body產生的blockbox。則根據上面介紹的參考線原理,div的左外邊距以containingblock的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的邏輯大小,而box實際顯示的高度等於box的物理大小,這說明box實際顯示的大小可能是box的邏輯大小,也可能是box的物理大小,規則到底是怎樣的——

box的實際大小=box的物理大小+正的margin

這僅對元素本身有效,對於其後面的相關元素,他們則只以margin的邏輯大小為准則,進行布局。

有朋友反應,聽得很迷糊,越看越不懂,如果你對具體的理解過程不感興趣的話,那記住下面我總結的結論就可以了,XD

結論:

box最後的顯示大小等於box的border及border內的大小加上正的margin值。而負的margin值不會影響box的實際大小,如果是負的top或left值會引起box的向上或向左位置移動,如果是bottom或right只會影響下面box的顯示的參考線。

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved