margin负值5种应用

1. 在流动性布局中的应用
　　如WordPress的两栏式不固定布局就是使用margin负值来实现的定位，属于左右margin负值在流动性布局中的应用。

1 <div style=”width:200px;float:left;border-right:4px solid #CEE1EE;margin-right:-200px;”>
2 　　左侧宽度固定
3 </div>
4 <div style=”backround:#888;margin-left:200px;”>
5 　宽度自适应，啦啦啦。。。宽度自适应，啦啦啦。。。宽度自适应，啦啦啦。。。
6 </div>

另一类两栏自适应用到的是margin的上下负值，尤为在一栏高度固定，另一栏高度不定的两栏或多栏布局中最为常见。高度不固定栏和高度固定的栏上下错开，均无浮动属性，高度不固定的栏margin-top一个负值，大小就是高度固定栏的高度，实现了两栏在同一水平线上。且宽度自适应，而且不用担忧有浮动出现的一系列问题。

样式部分：

1 .fixed-height{
2 　height:200px;
3 　width:200px;
4 　background:#666;
5 }
6 .flow-height{
7 　margin-top:-200px;
8 　margin-left:200px;
9 }

页面结构：

1 <div class=”container”>
2 　<div class=”fixed-height”>
3 　　高度固定哦
4 　</div>
5 　<div class=”flow-height”>
6 　　高度宽度自适应，啦啦啦。。。高度宽度自适应，啦啦啦。。。
7 　</div>
8 </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>

样式部分：

 1 <style type=”text/css”>
 2 ul{
 3 　margin:30px;
 4 　padding:0;
 5 　width:300px;
 6 }
 7 li{ list-style:none;}
 8 /** 横排模式 **/
 9 .cross{
10 　overflow:hidden;
11 　zoom:1;
12 } /** overflow:hidden隐藏最上边border，IE6须要zoom:1 **/
13 .cross li {
14 　float:left;
15 　padding:0 11px 0 10px;
16 　border-left:1px solid #AAA;
17 　margin-left:-1px;
18 } /*margin负值隐藏掉最左边边框*/
19 /*竖排模式*/
20 .vertical {
21 　overflow:hidden;
22 　position:relative;
23 　zoom:1;
24 } /*IE下子容器若是包含属性position:relative，则父容器失效(IE bug)，因此也须要设置父容器position:relative解决，IE6须要zoom:1来触发haslayout*/
25 .vertical li{
26 　border-top:1px dashed #CEE1EE;
27 　padding:5px 0;
28 　position:relative;
29 　top:-1px;
30 } /*竖排margin负值IE6不兼容，改成positon方式处理，与margin负值原理相同*/
31 </style>

结构部分：

 1 <ul class=”cross”>
 2 <li>tab1-1</li>
 3 　<li>tab1-2</li>
 4 　<li>tab1-3</li>
 5 　<li>tab1-4</li>
 6 </ul>
 7 <ul class=”vertical”>
 8 　<li>这里是一条信息</li>
 9 　<li>这里是一条信息</li>
10 　<li>这里是一条信息</li>
11 　<li>这里是一条信息</li>
12 　<li>这里是一条信息</li>
13 </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://fed.renren.com/”>人人前端测试</a></div>
</div>

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