css網頁製作技巧:margin負值和bug的解決

文章簡介：最近做的項目中經常會用到margin的負值，這裡就總結一下關於margin負值的5種使用及相關bug的解決。

最近做的項目中經常會用到margin的負值，這裡就總結一下關於margin負值的5種使用

及相關bug的解決。

1. 在流動性布局中的應用

如WordPress的兩欄式不固定式配置就是使用margin負值來實現的定位，屬於左右

margin負值在流動性布局中的應用。

<div style="width:200px;float:left;border-right:4px solid #CEE1EE;margin-right:-200px;">
左側寬度固定
</div>
<div style="backround:#888;margin-left:200px;">
寬度自適應，啦啦啦。。。寬度自適應，啦啦啦。。。寬度自適應，啦啦啦。。。
</div>

另外一類兩欄自適應用到的是margin的上下負值，尤其在一欄高度固定，另外一欄高度

不定的兩欄或多欄布局中最為常見。高度不固定欄和高度固定的欄上下錯開，均無浮動

屬性，高度不固定的欄margin-top一個負值，大小就是高度固定欄的高度，實現了兩欄

在同一水平線上。且寬度自適應，並且不用擔心有浮動出現的一系列問題。

樣式部分：

.fixed-height{
height:200px;
width:200px;
background:#666;
}
.flow-height{
margin-top:-200px;
margin-left:200px;
}

頁面結構：

<div class="container">
<div class="fixed-height">
高度固定哦
</div>
<div class="flow-height">
高度寬度自適應，啦啦啦。。。高度寬度自適應，啦啦啦。。。
</div>
</div>

2. 在選項卡等邊框線的處理
下圖顯示的是一種比較常見的選項卡。


如圖，使用margin-bottom:-1px;解決選項卡下邊框顯示的問題。[註：]使用margin-

top、margin-bottom需要看結構如何寫，靈活使用。

類似的，如果您要用七個div實現8條1像素的左右邊框，可以讓每個div都有左右1像素的

邊框，然後margin-right:-1px;或是margin-left:-1px;讓之間的邊框重疊來達到效

果。

3. 圖片與文字對齊問題

當圖片與文字在一起，往往都是不對齊的，因為圖片和文字預設是底部對齊。當圖片較

小比較明顯，使用vertical-align:middle;對齊，在firefox，chrome下能達到理想效

果，但是IE下還是有點彆扭。

使用margin負值能在每個瀏覽器上顯示完全一致。img標籤支援margin四個方向的正的

和負的定位。一般使用img標籤來顯示表徵圖，要與文字對齊達到理想的效果，可以設定

img{margin:0 3px -3px 0;}。

4. 隱藏首（末）邊框

本著結構盡量簡潔，樣式代碼盡量少，減少對js的依賴的原則，我們可以用樣式來實現

清單項目頭尾無邊框的效果，而無需額外設定諸如<li class=”last”>最後一個</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負值隱藏掉最左邊邊框*/
/*豎排模式*/
.vertical {
overflow:hidden;
position:relative;
zoom:1;
} /*IE下子容器如果包含屬性position:relative，則父容器失效(IE bug)，所以也需要設定父容器position:relative解決，IE6需要zoom:1來觸發haslayout*/
.vertical li{
border-top:1px dashed #CEE1EE;
padding:5px 0;
position:relative;
top:-1px;
} /*豎排margin負值IE6不相容，改為positon方式處理，與margin負值原理相同*/
</style>

結構部分：

<ul class="cross">
<li>tab1-1</li>
<li>tab1-2</li>
<li>tab1-3</li>
<li>tab1-4</li>
</ul>
<ul class="vertical">
<li>這裡是一條資訊</li>
<li>這裡是一條資訊</li>
<li>這裡是一條資訊</li>
<li>這裡是一條資訊</li>
<li>這裡是一條資訊</li>
</ul>

5.頁面上實現css sprite背景定位效果

使用img定義margin的負值實作類別似background-position效果。此方法能減少一個頁

面請求數，但是有違樣式與布局分離的原則，因此不推薦使用

ps:

使用margin負值在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 href="http://www.webjx.com/">網頁教學網</a></div>
</div>

解決方案：添加position:relative; zoom:1;