最近使用的负margin的两种用法

　　过去对负margin的使用不多，前段时间小强对负margin做了特别的分享，很有感触。所以在近期的项目开发中使用了负margin来解决过去比较棘手的问题。

　　现将使用到的两种方式归纳总结如下：

　　一、相邻元素的边框叠加问题

　　　　

　　　　如上图所示，我们在项目开发中会遇到很多种类似的tab设计，那么相邻元素之间的边线（红线所示）一直是个令人很头疼的问题。

　　　　一般的解决办法是，对所有的li单独设置左border或者右border，然后在最后一个li或者第一个li中添加单独的样式，给它单独添加一个右border或者左border。

　　　　你也可以想象，这样单独设置样式的办法有多麻烦，而且样式复杂的时候还要考虑更多的问题。

　　　　还有种比较另类的办法，单独做个div或者span什么的，通过css来模拟出一个“border”，然后在要使用border的问题把这个模拟的“border”打在页面上。好吧，这　　　　种方式似乎是把前一种方法的脑力劳动转化为了我们fe的体力劳动。

　　　　其实，还有更便捷的解决办法。

　　　　使用负margin解决的方式：

　　　　　　我们可以给每个元素同时设置左右border，然后根据border的宽度来设置li的右边距为相应的负值，这样前一个元素的右border会被后一个元素遮挡住，这样，我们看上去好像就只有一个border存在一样，达到了设计图的需求。

　　　　示例代码：

　　　　

<style type="text/css">
    ul{overflow:hidden;list-style: none;margin: o;padding:0;}
    li{float: left;width: 100px;text-align: center;border: 1px solid #999;}
    .mR li{margin-left: -1px;}
</style>

 <ul class="mR">
    <li style="border-color:red;">item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
 </ul>

　　　　执行后的效果如下图：

　　　　

　　二、隐藏元素左右边距的问题

　　如果你在项目中使用过图文混排列表，那么对这个问题肯定不陌生。

　　

　　如上图所示，设计师一般会给你类似上图的设计图，外层div宽度固定了990px，要求每个榜单宽度240px，榜单间间隔10px，这样240px*4+10px*3=990px。一般来说你可能会设置每个榜单比240px小些，然后每个榜单左右边距均为5px，这样设计出来的效果会导致第一个和最后一个元素跟外层di间有5px的间隔。虽然总体看起来也比较对称，可是达不到设计图上那么准确的要求，尤其是榜单的宽度变小了，可能会对内容有影响。而且，如果设计师比较较真的话，那你就惨了。。。

　　所以，一般的解决办法，是对第一个或者最后一个榜单添加特殊样式，做单独处理。这种解决办法在效果上可以解决上述问题，但是榜单是循环输出的，要使用这样解决办法就要进行计算，对后端同学或者写模板代码的前端来说比较坑爹。所以果断放弃吧！

　　使用负margin的解决办法:

　　　　使用负margin来解决很简单，外层div定宽度，并且设置overflow：hidden（目的是为了隐藏多出来的边距），内层ul设置右边距负margin值为榜单间隔值，里面的榜单只需要设置设计图上指定的宽度和指定的右边距为榜单间的间距就ok了。是不是比较简单？？？

　　示例代码：　　　　

<style type="text/css">
    .listWrap{width: 490px;background: #fff;overflow: hidden;}
    .list{background: #eee;margin-right: -10px;}
    .list li{width:90px;height: 90px;margin: 0 10px 10px 0;border: none;background: #999;}
</style>
<div class="listWrap">
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

　　代码执行后的效果图：

　　

　　上图中的灰色部分是li直接的边距，可以看到li与外层div的左右边距都是0，这样确实简单有效的达到了我们前面设计图上的效果。