css网页制造技巧:margin负值和bug的处置

编程技术  /  houtizong 发布于 3年前   65

最近做的项目中经常会用到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.Aiyiweb.Com/">爱易网络任务室</a></div>
</div>

处理方法：添加position:relative; zoom:1;