CSS中margin屬性解析邏輯
本文和大家重點(diǎn)討論一下CSS中margin屬性的解析邏輯，margin在中文中我們翻譯成外邊距或者外補(bǔ)白（本文中引用外邊距）。它是元素盒模型（boxmodel）的基礎(chǔ)屬性，可以用來(lái)設(shè)置box的margin area。
CSS中margin屬性由淺入深詳解
margin在中文中我們翻譯成外邊距或者外補(bǔ)白（本文中引用外邊距）。他是元素盒模型（boxmodel）的基礎(chǔ)屬性。
margin屬性包括margin-top,margin-right,margin-bottom,margin-left,margin，可以用來(lái)設(shè)置box的marginarea。屬性margin可以用來(lái)同時(shí)設(shè)置box的四邊外邊距，而其他的margin屬性只能設(shè)置其自各的外邊距。
CSS屬性margin的解析邏輯
目前我們已經(jīng)了解到了margin的基本特性和基本寫(xiě)法，但對(duì)元素margin的基本解析邏輯還是很模糊，到底margin的top、right、bottom、left都是以什么為基準(zhǔn)來(lái)促使boxmodel形成。為了形象，易懂的對(duì)margin的邏輯進(jìn)行說(shuō)明，下面講解的過(guò)程中，將引入W3C上沒(méi)有的參考線(xiàn)的說(shuō)法。何謂參考線(xiàn)？參考線(xiàn)就是margin移動(dòng)的基準(zhǔn)點(diǎn)，此基準(zhǔn)點(diǎn)相對(duì)于box是靜止的。而margin的數(shù)值，就是box相對(duì)于參考線(xiàn)的位移量。
在margin中top、right、bottom、left的參考線(xiàn)并不一致為一類(lèi)，而是分為了兩類(lèi)參考線(xiàn)，top和left的參考線(xiàn)屬于一類(lèi)，right和bottom的參考線(xiàn)屬于另一類(lèi)。那他們到底各以什么為參考線(xiàn)呢？top以containingblock的content上邊或者垂直上方相連元素margin的下邊為參考線(xiàn)垂直向下位移；left以containingblock的content左邊或者水平左方相連元素margin的右邊為參考線(xiàn)水平向右位移。right以元素本身的border右邊為參考線(xiàn)水平向右位移；bottom以元素本身的border下邊為參考線(xiàn)垂直向下位移。從上我們可以看到top和left都是以外元素為參考，而right和bottom以本元素為參考。上面的位移方向是指margin數(shù)值為正值時(shí)候的情形，如果是負(fù)值則位移方向相反。
或許理論聽(tīng)起來(lái)比較枯燥，我們舉例說(shuō)明一下：
ExampleSourceCode
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <title>無(wú)標(biāo)題文檔</title>
- <styletypestyletype="text/css">
- div{width:200px;height:200px;background:#ccc;}
- </style>
- </head>
- <body>
- <div>外邊距的margin-width的值類(lèi)型有：auto|length|percentage</div>
- </body>
- </html>
如上代碼，很簡(jiǎn)單，為了方便我們看到效果，我們給div設(shè)置了寬度和高度以及背景色?，F(xiàn)在我們給div的樣式加上margin屬性，比如：
ExampleSourceCode
- margin:-10px20px-30px40px;
這時(shí)候margin的解析邏輯是怎樣的呢？首先我們要搞清div的和周邊元素的關(guān)系，div沒(méi)有相連元素，而此時(shí)div的containingblock是body產(chǎn)生的blockbox。則根據(jù)上面介紹的參考線(xiàn)原理，div的左外邊距以containingblock的content左邊為參考線(xiàn)，及此時(shí)以body的content左邊為參考線(xiàn)進(jìn)行水平向右位移，位移的大小為40px，同理，上邊距以body的content上邊為參考線(xiàn)進(jìn)行垂直向上位移10px（負(fù)值和正值的方向相反），下邊距依照現(xiàn)在div的borer下邊（此時(shí)的div已經(jīng)經(jīng)過(guò)上邊距位移過(guò)了）垂直向上位移30px（此時(shí)，margin不會(huì)改變box的border內(nèi)的物理大小，但會(huì)改變box的邏輯大小，即：以此box的margin的下邊為參考的元素，不是從box的物理位置開(kāi)始的，而是從邏輯位置開(kāi)始），右邊距依照現(xiàn)在div的borer右邊（此時(shí)的div已經(jīng)經(jīng)過(guò)左邊距位移過(guò)了）水平向右位移20px?；蛟S有朋友問(wèn)你分析的順序怎么和margin表達(dá)式中出現(xiàn)的順序不一樣？如果按照margin表達(dá)式中出現(xiàn)的順序來(lái)分析，結(jié)果是一樣的，只是為了更好的方便大家的理解而沒(méi)有按照表達(dá)式的順序來(lái)分析。
用margin***的顯示大小到底是怎么樣的，或許有朋友也比較疑惑，我暫時(shí)用邏輯大小和物理大小來(lái)區(qū)分（其實(shí)上面已用到此概念），到底什么是邏輯大小，什么是物理大小呢？！具體可以看圖，物理大小指的是除去margin，也就是包含border以?xún)?nèi)的box大小，而邏輯大小，則是box通過(guò)margin解析規(guī)則解析后得到的大小（這或許可以解釋為什么IE5會(huì)錯(cuò)誤解析盒模型），當(dāng)邏輯大小小于物理大小時(shí)，則不會(huì)影響實(shí)際box的顯示，也就是說(shuō)，此時(shí)顯示的是box的物理大小，而當(dāng)邏輯大小大于物理大小時(shí)，則此時(shí)顯示邏輯大小。這僅對(duì)元素本身有效，對(duì)于其他相關(guān)元素，他們則只以margin的邏輯大小為準(zhǔn)則，進(jìn)行布局。
【編輯推薦】
- CSS中margin屬性的基本特性和寫(xiě)法
- 深度剖析CSS中margin邊界疊加用法
- CSS中font-size屬性值四大種類(lèi)
- 解析四大CSS屬性值選擇器用法
- 專(zhuān)家推薦 DIV CSS表單布局的五個(gè)小技巧
