用好负边距，省时又省力

说到负边距，广大的前端兄弟们肯定不会陌生，外边距 margin 的作用是增加容器与容器的间距，而负值则是减少间距。在平时的工作中，用好负边距，不仅能让我们的代码更优美，还能很大的提高工作效率。

以下一些例子是我平时工作上碰到的，还有些是在网上学习时见到的，一并列出来，和大家一块分享，一共6个，以后碰见了新的用法我会再更新上来。

1.在滑动门导航中的应用

这个例子中主要是用负边距去遮挡了 nav 的下边框，然后当哪个导航标签被选中的时候，替换下边框的颜色就行了，算是一种障眼法吧，哈哈！

CSS：

.nav {
    list-style:none;
    *overflow:hidden;
}
.nav li {
    *position:relative;
    float:left;
    padding:5px 20px;
    margin-left:10px;
    margin-bottom:-2px;
    border:2px solid #65B453;
    border-radius:4px;
    background:#0C7823;
    font-size:14px;
    color:#fff;
}
.nav .hover {
    background:#E9FBE4;
    border-bottom:2px solid #E9FBE4;
    color:#0F6621;
}
.content {
    clear:both;
    width:340px;
    height:150px;
    border:2px solid #65B453;
    border-radius:4px;
    background:#E9FBE4;
}

HTML：

<ul class="nav">
  <li class="hover">nav1</li>
  <li>nav2</li>
  <li>nav3</li>
</ul>
<div class="content"></div>

猛击demo ☻

2.去除浮动列表的右边距

这个效果应该是我们平时最常用的了，以前都是给最后一个套上个 class ，但这样太麻烦，IE6 又不支持高级的选择器写法，利用负边距去做，真是省时又省力：）

CSS：

div {
    overflow:hidden;
    width:540px;
    border:2px solid #65B453;
    background:#0C7823;
}
ul {
    overflow:hidden;
    zoom:1;
    margin-right:-10px;
    list-style:none;
}
ul li {
    float:left;
    margin-right:10px;
    width:100px;
    height:100px;
    background:#E9FBE4;
}

HTML：

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

猛击demo ☻

3.去除列表li元素的下边框

注意不要为 ul 设置高度，可以在外层父元素设置想要的高度。

CSS：

ul {
    overflow:hidden;
    width:240px;
    border:1px solid #65B453;
    border-radius:4px;
    background:#E9FBE4;
    list-style:none;
}
ul li {
    padding:15px 10px;
    border-bottom:2px solid #65B453;
    margin-bottom:-2px;
}

HTML：

<ul>
  <li>负边距测试</li>
  <li>负边距测试</li>
  <li>负边距测试</li>
  <li>负边距测试</li>
  <li>负边距测试</li>
  <li>负边距测试</li>
</ul>

猛击demo ☻

4.元素等高

这个主要的是要给元素加上一个大大的下内边距，然后利用相同的负边距去消除掉这个高度，这会让元素溢出容器，而最外的父容器定义了溢出隐藏，溢出的部分在负边距的最高点给切断了，所以就成了我们现在看到的这个样子。

CSS：

.test-wrap {
    overflow:hidden;
    width:100%;
}
.test-box {
    float:left;
    padding:30px;
    padding-bottom:400px;
    margin-left:20px;
    margin-bottom:-370px;
    width:360px;
    background:#65B453;
    font-size:20px;
    color:#fff;
}

HTML：

<div class="test-wrap">
  <div class="test-box">
    <p>text</p>
  </div>
  <div class="test-box">
    <p>text</p>
  </div>
</div>

猛击demo ☻

5.自适应布局

这个布局看这很像邮箱，边栏定宽，内容区域自适应。现在 wordpress 的默认布局也是这种负边距的方法，很值得一学。

CSS：

.header {
    width:100%;
    height:30px;
    background:#3FA156;
}
.main {
    float:right;
    margin-left:-300px;
    width:100%;
    background:#E9F5E9;
    border-bottom:2px solid #9BCE8C;
}
.main .content {
    margin-left:300px;
    height:700px;
}
.sidebar {
    float:left;
    width:300px;
    height:700px;
    background:#9BCE8C;
}

HTML：

<div class="header"></div>
<div class="main">
  <div class="content"></div>
</div>
<div class="sidebar"></div>

猛击demo ☻

6.对父元素水平垂直居中

先用绝对定位将元素的左上角定位到父级中间，然后利用元素宽高的一半的负边距将元素拉回到中间来。

CSS：

.test {
    position:absolute;
    left:50%;
    top:50%;
    margin:-150px 0 0 -150px;
    width:300px;
    height:300px;
    border:2px solid #65B453;
    border-radius:4px;
    background:#E9FBE4;
}

HTML：

<div class="test"></div>

猛击demo ☻

http://www.feelcss.com/good-use-of-negative-margins.html