首页 > 经验 > 详解css样式表中五种margin负值应用
2014
07-22

详解css样式表中五种margin负值应用

网页的前端设计中经常使用margin的负值,今天给大家带来的是margin负值的五种应用以及相关bug处理。

1

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. 在选项卡等边框线的处理

下图显示的是一种比较常见的选项卡。

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>

3
样式部分:

<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:有一部分被隐藏掉了

4

<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://fed.renren.com/”>人人前端测试</a></div>

</div>

解决方法:添加position:relative; zoom:1;

文章来源:独创意