|
三、margin的解析邏輯
目前我們已經(jīng)了解到了margin的基本特性和基本寫法，但對元素margin的基本解析邏輯還是很模糊，到底margin的top、right、bottom、left都是以什么為基準(zhǔn)來促使box model形成。為了形象，易懂的對margin的邏輯進(jìn)行說明，下面講解的過程中，將引入W3C上沒有的參考線的說法。何謂參考線？參考線就是margin移動的基準(zhǔn)點，此基準(zhǔn)點相對于box是靜止的。而margin的數(shù)值，就是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數(shù)值為正值時候的情形，如果是負(fù)值則位移方向相反。
或許理論聽起來比較枯燥，我們舉例說明一下：
<!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>無標(biāo)題文檔</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設(shè)置了寬度和高度以及背景色。
現(xiàn)在我們給div的樣式加上margin屬性，比如：
margin:-10px 20px -30px 40px;
這時候margin的解析邏輯是怎樣的呢？首先我們要搞清div的和周邊元素的關(guān)系，div沒有相連元素，而此時div的containing block是body產(chǎn)生的block box。則根據(jù)上面介紹的參考線原理，div的左外邊距以containing block的content左邊為參考線，及此時以body的content左邊為參考線進(jìn)行水平向右位移，位移的大小為40px，同理，上邊距以body的content上邊為參考線進(jìn)行垂直向上位移10px（負(fù)值和正值的方向相反），下邊距依照現(xiàn)在div的borer下邊（此時的div已經(jīng)經(jīng)過上邊距位移過了）垂直向上位移30px（此時，margin不會改變box的border內(nèi)的物理大小，但會改變box的邏輯大小，即：以此box的margin的下邊為參考的元素，不是從box的物理位置開始的，而是從邏輯位置開始），右邊距依照現(xiàn)在div的borer右邊（此時的div已經(jīng)經(jīng)過左邊距位移過了）水平向右位移20px�；蛟S有朋友問你分析的順序怎么和margin表達(dá)式中出現(xiàn)的順序不一樣？如果按照margin表達(dá)式中出現(xiàn)的順序來分析，結(jié)果是一樣的，只是為了更好的方便大家的理解而沒有按照表達(dá)式的順序來分析。
用margin最后的實際顯示大小的到底是怎么樣呢，或許有朋友也比較疑惑，我暫時用邏輯大小和物理大小來區(qū)分（其實上面已用到此概念），到底什么是邏輯大小，什么是物理大小呢？！具體可以看圖，物理大小指的是除去margin，也就是包含border以內(nèi)的box大小，而邏輯大小，則是box通過margin解析規(guī)則解析后得到的大�。ㄟ@或許可以解釋為什么IE5會錯誤解析盒模型）。在上圖中，box的實際顯示的寬度等于box的邏輯大小，而box實際顯示的高度等于box的物理大小，這說明box實際顯示的大小可能是box的邏輯大小，也可能是box的物理大小，規(guī)則到底是怎樣的——
box的實際大小=box的物理大小+正的margin
這僅對元素本身有效，對于其后面的相關(guān)元素，他們則只以margin的邏輯大小為準(zhǔn)則，進(jìn)行布局。
有朋友反應(yīng)，聽得很迷糊，越看越不懂，如果你對具體的理解過程不感興趣的話，那記住下面我總結(jié)的結(jié)論就可以了，XD
結(jié)論：box最后的顯示大小等于box的border及border內(nèi)的大小加上正的margin值。而負(fù)的margin值不會影響box的實際大小，如果是負(fù)的top或left值會引起box的向上或向左位置移動，如果是bottom或right只會影響下面box的顯示的參考線。
經(jīng)典論壇討論:
http://bbs.blueidea.com/thread-2728471-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2007/4546.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 由淺入深漫談margin屬性 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 由淺入深漫談margin屬性 [2]
