margin负值的几点研究心得

发表于2014-06-08 11:28| 次阅读| 来源胡萝卜| 作者管理员

摘要：我们在使用css制作页面时，margin是使用很广泛的一种属性。而多数情况下我们使用最多的是把margin的值设置成正值，其实使用负margin值有时候也能带给我们很多便利

我们在使用css制作页面时，margin是使用很广泛的一种属性。而多数情况下我们使用最多的是把margin的值设置成正值，其实使用负margin值有时候也能带给我们很多便利。当然我们在使用margin负值之前，应该首先了解一下margin负值的意思。

负margin不是一种hack，它是W3C认准的CSS是绝对标准的，对于margin来说，负值是被认可的。

不脱离文档流不使用float的话，负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。

完全兼容所有现代浏览器都完全支持负margin（IE6在大多数情况下也支持）。

浮动会影响负margin的使用，应用时应小心谨慎。

对没有设置浮动的元素来说，下面例子说明了margin对元素的影响。

<div class='first'>first</div>
<div class='second'>second</div>

对元素first设置margin-top/margin-left，元素会往上或往左的方向移动

.first{width: 200px; height: 200px; background: #999; margin: -20px 0 0 -20px;}

对元素first设置margin-bottom/margin-right，元素不会往下或往右的方向移动，而是把后续元素second覆盖住这个元素。

.first{width: 200px; height: 200px; background: #999; margin: 0 -20px -20px 0;}

为了让效果看的更加明显，我们为second元素设置margin-left，让它往左移动一下

.second{width: 200px; height: 200px; background: red; margin-left: 20px;}

效果如下：

对于设置了浮动的元素的负margin

<div class='first'>first</div>
<div class='second'>second</div>
.first{width:100%; height: 150px; background: #999; float:left; margin-right:-100px;}

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

应用案例：

制作包含多列的单个<ul>

HTML代码：

<ul>
<li class="col1">hello素材网1</li>
<li class="col1">hello素材网2</li>
<li class="col2 top">hello素材网3</li>
<li class="col2">hello素材网4</li>
<li class="col3 top">hello素材网5</li>
<li class="col3">hello素材网6</li>
</ul>

CSS样式：

ul,li{list-style: none;}
li {line-height:1.3em;}
.col2 {margin-left:150px;}
.col3 {margin-left:300px;}
.top {margin-top:-2.6em;}

如果有一列太长而不能垂直显示，可以使用上面的方法进行分列显示，如下图显示

通过在类top中设置margin-top:-2.6em(<li>标签的2倍行高)，所有元素都完美的对齐了。你只需要将负margin应用到每列的第一个标签上，而不是设置每个<li>的相对位置。

制作两列的布局：

HTML代码：

<div class='main'>
<div class='first'>first</div>
<div class='second'>second</div>
</div>

CSS样式：

.main{width:600px; height:500px; margin:0 auto; border:1px solid blue;}
.first{width: 150px; height: 150px; background: #999; float: left; margin-left: -150px;}
.second{width: 100%; height: 150px; background: red;}

我们只为first元素设置浮动float:left;和margin-left:-150px/margin-right:-150px;

如果给一个浮动元素加上相反方向的负margin，则会使行间距为0且内容重叠。（如上图）

如果我们为两个元素都设置浮动，并为元素first设置margin-right负值，你会发现两个元素导致重叠。

当然使用过程还是会出现bug的，我们一起来看一下

当浮动元素使用负margin时，在一些旧的浏览器中可能会出现问题，问题现象包括：

1、链接无法点击;

2、文字难以选中；

3、失去焦点后，tab任何链接都会消失；

4、如果你不幸在办公室使用IE6的话，有时候会发现重叠和浮动的元素中内容会被突然截断。

解决方法：

给元素添加position:relative，便能正常运行！

Margin负值法

这种方法是在实际的网站中应用的最多的。首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。

见下面的CSS代码：

html,body{ margin: 0; height: 100%;}
.main{width: 100%; height: 100%; float: left;}
.main .main-content{ height: 100%; margin: 0 210px; background: #ccc;}
.left,.right{width: 200px; height: 100%; float: left; background: #666;}
.left{ margin-left: -100%;}
.right{ margin-left: -200px;}

HTML代码：

</div>

您需要注意几个div的顺序，无论是左浮动还是右浮动，先是主体部分div，这是肯定的，至于左右两栏谁先谁后，都无所谓，我测试了IE6，Firefox，以及chrome浏览器，表现一致。

此方法的优点：三栏相互关联，可谓真正意义上的自适应，有一定的抗性——布局不易受内部影响。

缺点在于：相对比较难理解些，上手不容易，代码相对复杂。出现百分比宽度，过多的负值定位，如果出现布局的bug，排查不易。

更多关于margin负值问题，欢迎留言探讨！