CSS奇淫巧技之：negative margin负边距妙用

一、案例与疑问

左列定宽右列自适应有这样一种思路：

.left{width:100px;float:left;}

.right-fix{width:100%;margin-left:-100px;float:right;}

.right{margin-left:100px;}

测试后发现

此例适用于一栏宽度固定一栏宽度自适应的布局，就像QQmail一样，导航栏宽度固定，内容区域随着浏览器的大小而自动缩放。

二、概念

由此引出了negative margin的概念：

负边距对这些由文档|图片流控制的元素的作用是，会使它们在文档流中的位置发生偏移，但这种偏移不同于相对定位，通过相对定位偏移后，其仍然会坚守着它原来占据的空间，不会让文档流的其它元素乘虚而入。而通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。

一句话概括负边距导致可以向边界外扩张。（与相对定位的区别在于后者会占位）

应注意的是不能设置height width否者呈现的是位移效果

三、发散--实际应用

negative margin的应用：

1.实现水平垂直居中：负边距+局对定位

.left{width:100px;float:left;background:rosybrown;height:200px}

.right-fix{width:100%;margin-left:-100px;float:right;}

.right{margin-left:100px;background:goldenrod;height:300px}

2.实现去掉边框的浮动列表展示：

所以解决办法是加大子元素的父容器的宽度，让它能够容纳一行中有四个子元素加上四列间隔的宽度，然后最外面的的黑框的那个容器（祖父容器）设一个overflow:hidden就行了。

这个方案的好处在于不用多定义（：last-child）

3.额外增加元素宽度并突破边界限制

4.实现浮动半重叠效果

5.去除列表最后一个li元素的border-bottom

方法有多种，加class去除，这种方法需要破坏html结构；另一种方法是使用结构伪类[:nth-child(an+b)](http://topcss.org/demo/pseudo-nth-child.html)，设置*a:last-child{border-bottom:0 none;}*，可惜我们的IE6不支持这么高级的选择器。不过，我们可以为li元素设置*margin-bottom:-1px;*来实现，不过不要为ul/ol设置高度，需要高度请在外层嵌套一个div设置高度。

这儿应注意的是不能设置height width否者呈现的是拉伸效果

说白了就是竖着的浮动列表去边框效果

6.负边距自适应布局（同开始的例子）

7.三栏等高效果实现

此例关键是给每个框设置大的底部内边距，然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素，如果把外包容器的overflow属性设为hidden，列就在最高点被裁切。

这儿设置大的内边距 在于保证被切的时候不切到正文

内外边距正负相反是为了保证内边距能越过父元素边界

.box{

overflow: hidden;

width: 100%;

position: relative;

}

.i{

float: left;

margin: 20px;

padding: 20px;

background-color: #565656;

margin-bottom: -200px;

padding-bottom: 200px;

width:300px;

}