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
|