负margin用法权威指南

margin负值作用有二种情况：元素为：1.static(默认) 2. float（浮动）

1.作用于static元素上的负margin属性

 

Static元素是没有设定成浮动的元素，下图说明了负margin对static元素的作用

1、当static元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。

2、但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。(使用在元素最后有一个border-bottom 去除)

3、如果元素没有设置width的话那么负值就像给它增加长度一样。（在列表中让最后一个元素的margin或padding去掉就可以用这种方法，）

 

2.浮动元素上的负margin

1、如果给一个浮动元素加上相反方向的负margin，则会使行间距为0且内容重叠。这对于创建1列是100%宽度而其他列是固定宽度（比如100px）的自适应布局来说是非常有用的方法。

2、若两个元素都为浮动，且#mydiv1的元素设定margin-right为20px。这样#mydiv2会认为#mydiv1的宽度比原来宽度缩短了20px（因此会导致重叠）。但有意思的是，#mydiv1的内容不受影响，保持原有的宽度。

3、如果负margin等于实际宽度，则元素会被完全覆盖。这是因为元素的完全宽度等于margin，padding，border，width相加而成，所以如果负margin等于余下三者的和，那元素的实际宽度也就变成了0px。

ie6、ie7的兼容：

<style>
*{margin: 0;padding: 0;}
body{padding: 200px;}
</style>
<div style="width:200px;height:200px;background:#f00;"><div style="margin:0 -20px;background:#080;*zoom:1;_position:relative;">带margin负值的元素</div></div>

复制上面2段代码，分别在ie6、7上运行，可看到“解决问题后的代码”在页面上的展示效果已同其它浏览器效果一样了：带margin负值的元素,负值部分能完全显示出来了！！

对比上面2段代码，发现就只给带margin值为负值的元素加了“*zoom:1;_position:relative;”！

个人理解：加了zoom:1属性触发ie7的hasLayout属性,ie7下margin负值可见，但ie6仍坚持隐藏负值部分，需添加position:relative,添加该属性应该是提高了元素层级(z-index)，因此该子元素超出父元素部分就能再次重现了！

很多时候，为解决ie6/7对带margin负值的元素渲染错误导致的页面显示问题，我们还需要在父元素中触发layout，在父元素上加类似*zoom:1  这样触发layout的属性！