1. 頁(yè)面上實(shí)現(xiàn)css sprite背景定位效果
使用img定義margin的負(fù)值實(shí)現(xiàn)類(lèi)似background-position效果。此方法能減少一個(gè)頁(yè)面請(qǐng)求數(shù)，但是有違樣式與布局分離的原則，因此不推薦使用。使用margin負(fù)值在IE6/IE7下的bug：有一部分被隱藏掉了
<div style="height:120px;width:120px; border: 5px solid #888">
<div style="background-color:#CEE1EE;margin-top: -10px;position:relative;zoom:1">
<a >網(wǎng)奇網(wǎng)站制作</a></div>
</div>
解決方法：添加position:relative; zoom:1;
2. 在選項(xiàng)卡等邊框線(xiàn)的處理
使用margin-bottom:-1px;解決選項(xiàng)卡下邊框顯示的問(wèn)題。[注：]使用margin-top、margin-bottom需要看結(jié)構(gòu)如何寫(xiě)，靈活使用。類(lèi)似的，如果您要用七個(gè)div實(shí)現(xiàn)8條1像素的左右邊框，可以讓每個(gè)div都有左右1像素的邊框，然后margin-right:-1px;或是margin-left:-1px;讓之間的邊框重疊來(lái)達(dá)到效果。
3. 圖片與文字對(duì)齊問(wèn)題
當(dāng)圖片與文字在一起，往往都是不對(duì)齊的，因?yàn)閳D片和文字默認(rèn)是底部對(duì)齊。當(dāng)圖片較小比較明顯，使用vertical-align:middle;對(duì)齊，在firefox，chrome下能達(dá)到理想效果，但是IE下還是有點(diǎn)別扭。使用margin負(fù)值能在每個(gè)瀏覽器上顯示完全一致。img標(biāo)簽支持margin四個(gè)方向的正的和負(fù)的定位。一般使用img標(biāo)簽來(lái)顯示圖標(biāo)，要與文字對(duì)齊達(dá)到理想的效果，可以設(shè)置img{margin:0 3px -3px 0;}。
4. 在流動(dòng)性布局中的應(yīng)用
如WordPress的兩欄式不固定布局就是使用margin負(fù)值來(lái)實(shí)現(xiàn)的定位，屬于左右margin負(fù)值在流動(dòng)性布局中的應(yīng)用。
<div style="width:200px;float:left;border-right:4px solid #CEE1EE;margin-right:-200px;">左側(cè)寬度固定</div>
<div style="backround:#888;margin-left:200px;">寬度自適應(yīng)，啦啦啦。。。寬度自適應(yīng)，啦啦啦。。。寬度自適應(yīng)，啦啦啦。。。</div>
另外一類(lèi)兩欄自適應(yīng)用到的是margin的上下負(fù)值，尤其在一欄高度固定，另外一欄高度不定的兩欄或多欄布局中最為常見(jiàn)。高度不固定欄和高度固定的欄上下錯(cuò)開(kāi)，均無(wú)浮動(dòng)屬性，高度不固定的欄margin-top一個(gè)負(fù)值，大小就是高度固定欄的高度，實(shí)現(xiàn)了兩欄在同一水平線(xiàn)上。且寬度自適應(yīng)，并且不用擔(dān)心有浮動(dòng)出現(xiàn)的一系列問(wèn)題。
樣式部分：
.fixed-height{height:200px;width:200px;background:#666;}
.flow-height{margin-top:-200px;margin-left:200px;}
頁(yè)面結(jié)構(gòu)：
<div class="container">
<div class="fixed-height">高度固定哦</div>
<div class="flow-height">高度寬度自適應(yīng)，啦啦啦。。。高度寬度自適應(yīng)，啦啦啦。。。</div></div>
5.隱藏首（末）邊框
本著結(jié)構(gòu)盡量簡(jiǎn)潔，樣式代碼盡量少，減少對(duì)js的依賴(lài)的原則，我們可以用樣式來(lái)實(shí)現(xiàn)列表項(xiàng)頭尾無(wú)邊框的效果，而無(wú)需額外設(shè)置諸如<li class=”last”>最后一個(gè)</li>
樣式部分：
<style type="text/css">
ul{margin:30px;padding:0;width:300px;}
li{ list-style:none;}
/** 橫排模式 **/
.cross{overflow:hidden;zoom:1;}
/** overflow:hidden隱藏最上邊border，IE6需要zoom:1 **/
.cross li {float:left;padding:0 11px 0 10px;border-left:1px solid #AAA;margin-left:-1px;}
/*margin負(fù)值隱藏掉最左邊邊框*/
/*豎排模式*/
.vertical {overflow:hidden;position:relative;zoom:1;}
/*IE下子容器如果包含屬性position:relative，則父容器失效(IE bug)，所以也需要設(shè)置父容器