CSS網頁制作教程:負margin制作自适應左右布局
剛剛開始學習css的時候，我采用了float為主來實作布局的方式，但是運用浮動很長一段時間之後，我發現這是一種被人牽着鼻子走的做法。至少，頁面上不應過多的運用浮動，尤其是不要拿來确定整個布局。
很簡單的道理，當你用了float:left,後面的div很可能需要跟着用float:left，而且當寬度不夠的時候，本來該和上一個div一個水準線上的div跑到下面去了，如果某個div有margin屬性，還會遇到ie6那個煩人的bug。而且浮動之後，你還必須在合适的地方使用清除浮動。
為了形象、易懂的解釋負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數值為正值時候的情形，如果是負值則位移方向相反。
先看看一個完整的例子
| <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;} .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> |
來分析這段代碼，example元素下方有一相鄰元素normal（注：這裡分析的是添加和删除margin後的example元素，normal元素僅作為example元素前後效果的參照）。
根據上文的參考線原理margin:-10px(top) 20px(right) -30px(bottom) 40px(left); 上-10px和左40px将以外元素為參考，所謂外元素就是本元素的邊界元素（再白話點的解釋就是元素的緊鄰元素，這裡涉及到containing block知識，可自行網上搜尋）。example元素上邊和左邊的邊界元素即為wrap父元素，wrap父元素為基準點，example的margin-top為-10px，想象下如果這裡margin-top為+10px會什麼情況，沒錯如果為+10px，example元素相對于wrap父元素邊緣為基準，那麼example元素會同wrap父元素10px産生間隙邊距，那麼反過來，margin-tip:-10px;還是與wrap父元素邊緣為基準，反過來向上推10px的距離位置。example元素的margin-left為40px，這裡就按照正常邏輯相隔40px邊距，同理如果為-40px，那麼就是反方向向左推進40px的距離位置。
再來看example元素的margin-right和margin-bottom，由上文得知這倆個值是以元素本身為參考。什麼叫以元素本身為參考呢，确切含義是指以自身為參考來影響周圍元素的位置（實質即為影響下邊和右邊相鄰元素的參考線）。這裡的margin-bottom為-30px，對于其自身位置沒有任何變化，但是對于其下方元素normal元素産生了極大的影響，因為normal元素的上邊界元素即為example元素，根據example元素邊界來判定自身位置，想象下如果example元素margin-bottom為+30px，那麼example元素将隔開下方的normal元素，反之為-30px，下方normal元素由于example參考線内凹，導緻了normal元素自個兒身不由己的被“提”了上去了。這就是以自身為參考影響周圍元素位置的含義。
當margin四個值都為正數值的話，那麼margin按照正常邏輯同周圍元素産生邊距。當元素margin的top和left是負值時會引起元素的向上或向左位置移動。而當元素margin的bottom和right是負值時會影響右邊和下邊相鄰元素的參考線。
<!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>Margin參考線舉例說明</title>
<style type="text/css">
*{margin:0; padding:0;}<em>/*_height是為了相容IE6的*/</em>
.wrap{width:400px; border:5px solid #aaa;}
.example{width:200px; height:200px; background:#CCCCFF;}
.normal{width:200px; height:200px; background:#CCE8CF;}
.example{margin:10px 0px 0px 20px;}<strong>/*上左優先；下會影響下面的DIV是不是有重疊部分，下有負，
下面的DIV會重疊；外面的邊框會不會跟着變矮取決于外面的DIV不設高度；設了高度的話，裡面的兩個DIV的高度大就會撐出外面DIV*/
/*上左以父元素為參考，下右以元素本身為參考*/</strong>
</style>
</head>
<body>
<div class="wrap">
<div class="example">example元素：margin參考線舉例說明文字，請檢視此元素由于margin的變化所移動的位移量。</div>
<div class="normal">一個普通的Box</div>
</div>
</body>
</html>
<!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>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;}
.example{margin:-10px -20px 20px 20px;}/*上左優先；下會影響下面的DIV是不是有重疊部分，下有負，
下面的DIV會重疊；外面的邊框會不會跟着變矮取決于外面的DIV不設高度；設了高度的話，裡面的兩個DIV的高度大就會撐出外面DIV*/
</style>
</head>
<body>
<div class="wrap">
<div class="example">example元素：margin參考線舉例說明文字，請檢視此元素由于margin的變化所移動的位移量。</div>
<div class="normal">一個普通的Box</div>
</div>
</body>
</html>
詳細講解負margin
[原創] 負邊距(negative margin)實作自适應的div左右排版
也就是說我需要一個左邊自适應，而右邊固定的左右布局，或者說某一邊固定，另一邊占據剩餘部分，該如何做呢？
我找到的最好的答案是使用 負margin （配合浮動），下面概括一下原理：
使用負margin可以使目前的div左邊能容納下面的div浮動上來，是以把右邊的div擺在前面，左邊的擺後面，右邊的使用負margin就能讓左邊的浮上來，這樣就遮住了右邊的左半部分，隻要右邊再内部使用一個div，外左邊距為左邊的寬度就實作了左右的排版。
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)