|
blankzheng的blog：http://www.planabc.net/
margin在中文中我們翻譯成外邊距或者外補(bǔ)白（本文中引用外邊距）。他是元素盒模型（box model）的基礎(chǔ)屬性。
一、margin的基本特性
margin屬性包括margin-top,margin-right,margin-bottom,margin-left,margin，可以用來設(shè)置box的margin area。屬性margin可以用來同時(shí)設(shè)置box的四邊外邊距，而其他的margin屬性只能設(shè)置其自各的外邊距。
margin屬性可以應(yīng)用于幾乎所有的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，而且垂直外邊距對(duì)非置換內(nèi)聯(lián)元素（non-replaced inline element）不起作用。
或許有朋友對(duì)非置換元素（non-replaced element）有點(diǎn)疑惑，稍微幫助大家理解一下。非置換元素，W3C中沒有給出明確的定義，但我們從字面可以理解到，非置換元素對(duì)應(yīng)著置換元素（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等這類默認(rèn)就有CSS格式化外表范圍的元素。進(jìn)而可知，非置換元素（non-replaced element）就是除了img，input，textarea，select，object等置換元素以外的元素。
margin始終是透明的。
二、margin的基本寫法
外邊距的margin-width的值類型有：auto | length | percentage
percentage：百分比是由被應(yīng)用box的containing block（注：一個(gè)元素的containing block是該元素產(chǎn)生的box(es)在計(jì)算位置和大小時(shí)參考的一個(gè)矩形，詳細(xì)閱讀可看：《Containing Block》）的大小所決定。對(duì)于margin-top和margin-bottom也同樣成立。
margin的默認(rèn)值為0，并且margin支持負(fù)值。
上面我們?cè)岬綄傩詍argin可以用來同時(shí)指定box的四邊外邊距。如果屬性margin有四個(gè)值，那么值將按照上-右-下-左的順序作用于四邊，即從元素的上邊開始，按照順時(shí)針的順序圍繞元素。表達(dá)式如下：
margin：top right bottom left；
四個(gè)數(shù)值中間以空格分隔。效果等同于：
margin-top:value;
margin-right:value;
margin-bottom:value;
margin-left:value;
并且規(guī)范還提供了省略的數(shù)值寫法，基本原則如下：
引用:
1.如果沒有l(wèi)eft值，則使用right代替；
2.如果沒有bottom值，則使用top代替；
3.如果沒有right值，則使用top值代替。
根據(jù)這些基本原則，我們可以有三種省略方式，但不管怎樣省略margin的數(shù)值都會(huì)大于等于一個(gè)，而margin的默認(rèn)數(shù)值是從top開始至left結(jié)束，那么對(duì)于省略的具體情況，我們可以從left反推理回去。
1.如果margin只有三個(gè)值，按照值的順序?yàn)閙argin：top right bottom; 缺少了left，根據(jù)原則，則left的值有right來代替。
margin:10px 20px 30px;就等于margin:10px 20px 30px 20px;
2.如果margin只有兩個(gè)值，按照值的順序?yàn)閙argin：top right; 缺少了bottom和left，根據(jù)原則left的值由right來代替，bottm的值由top來代替。
margin:10px 20px;就等于margin:10px 20px 10px 20px;
3.如果margin只有一個(gè)值，按照值的順序?yàn)閙argin:top; 缺少了bottom、left和right，根據(jù)原則left的值由right來代替，bottom的值由top來代替，right的值右top來代替，也就是說left的值也由top來代替。
margin:10px;就等于margin:10px 10px 10px 10px;
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 下一頁 由淺入深漫談margin屬性 [2]
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 由淺入深漫談margin屬性 [1]
第 2 頁 
