CSS 中將margin設定為負值的原理和應用
現如今,負margin技術的應用可謂越來越廣,任一個大型站點驚鴻一瞥之下都會有其身影所在。個人認為負margin技術是學習css路上必不可缺少的課題之一,許多高階應用及疑難雜症修復都可以使用負margin技術進行實現。
負margin理論:
在說明什麼是負margin之前,你得清楚margin是個啥麼玩意,如果還不清楚可以先閱讀本人的前一篇文章《不要告訴我你懂margin》,預補下知識,回頭再讀這篇文章,相信倆篇文章都能給你帶來不少的收穫。
為了形象、易懂的解釋負margin,我們將引入W3C上沒有的參考線的說法。何謂參考線?參考線就是 margin移動的基準點,此基準點相對於box(自身)是靜止的。而margin的數值,就是box相對於參考線的位移量。
一個完整的margin屬性是這麼寫的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。在margin屬性中一共有兩類參考線,top和left的參考線屬於一類,right和bottom的參考線屬於另一類。top和left是以外元素為參考,right和bottom是以元素本身為參考。margin的位移方向是指margin數值為正值時候的情形,如果是負值則位移方向相反。
上面段文字和圖片或許挺難理解,我們來看實際程式碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
< meta
http-equiv = "Content-Type"
content = "text/html;
charset=utf-8"
/>
< title >Margin參考線舉例說明</ title >
< style
type = "text/css" >
*{margin:0;
padding:0;}
.wrap{width:400px;
border:5px solid #aaa;}
.example{width:200px;
height:200px; background:#CCCCFF;} .normal{width:200px;
height:200px; background:#CCE8CF;}
/*
新增或者註釋掉下面的margin屬性,檢視前後差別
.example{margin:-10px
20px -30px 40px;}
*/
</ style >
</ head >
< body >
< div
class = "wrap" >
< div
class = "example" >example元素:margin參考線舉例說明文字,請檢視此元素由於margin的變化所移動的位移量。</ div >
< div
class = "normal" >一個普通的Box</ div >
</ div >
</ body >
</ html
|