一、案例与疑问
左列定宽右列自适应有这样一种思路：
.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;
}
网友评论