margin负值-权威指南

在1998年CSS2的建议使用CSS进行页面设计布局，table就渐渐淡出了历史舞台。也因为如此，CSS也变成了编码优雅的代名词。
页面设计者用过的所有CSS概念中，margin常被设计者使用,而负margin应当是最少被谈及的定位方法，margin每个人都使用它，但很少人去讨论它。

1、使用负margin

我们在CSS中都会使用margin，但将margin设置成负数，那可能就不大好处理了。在网页设计中，人们对负margin用法的态度矛盾很大，有的人非常喜欢，而有的人则非常讨厌。

设置一个负margin应该是这样的：

https://csswang.com/content {margin-left:-100px;}

通常人们很少使用负margin但随后你会了解到，它能做很多东西，下面是几条有关负margin需要注意的地方：

• 负margin是W3C认准的CSS是绝对标准的。W3C甚至标注过：对于margin属性来说，负值是被允许的。
• 负maring不是一种hack，不能因为缺乏对负marign的理解，就认为它是一种hack方法。除非你是用来修复自己在其他地方造成的错误。
• 不脱离文档流不使用float的话，负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。
• 完全兼容所有现代浏览器都完全支持负margin（IE6在大多数情况下也支持）。
• 浮动会影响负margin的使用负margin不是你每天都用的CSS属性，应用时应小心谨慎。
• Dreamweaver不解析负margin,DW的设计视图不会解析负margin。但问题是你为什么要在设计视图中检查你的网站呢？

如果使用得当，负margin是非常强大的属性，以下是2种（负margin占主导位置）的场景。

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

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

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

例如：

/* 元素向上移10px*/
https://csswang.com/mydiv1 {margin-top:-10px;}

但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

/*mydiv1后续元素向上移10px, mydiv1 本身不移动*/
https://csswang.com/mydiv1 {margin-bottom:-10px;}

如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。

浮动元素上的负margin

考虑下以下这种情况

HTML代码:

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

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

/* 应用在与浮动相反方向的负margin */
https://csswang.com/mydiv1 {float:left; margin-right:-100px;}

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

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

实用技巧

自从知道使用负margin是符合CSS2标准的代码后，我们利用这个特性创建了一些有趣的CSS技术。

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

如果你有一列项目太长而无法垂直显示时，为什么不试试用分列的方式来代替它？负margin可以让你在不添加任何浮动元素或标签的情况下达到这种效果。如下，如此简单的操作就可以把集合分成三列，真是太令人惊叹了！

HTML代码:

<ul> 
  <li class="col1">Eggs</li> 
  <li class="col1">Ham</li> 
  <li class="col2 top">Bread</li> 
  <li class="col2">Butter</li> 
  <li class="col3 top">Flour</li> 
  <li class="col3">Cream</li> 
</ul>

CSS代码:

ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */

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

使用重叠产生强调

刻意重叠元素也是一种很好的设计比喻，这样能产生一种深度错觉，从而突出特定的元素。Phlashers.com的评论模块就是一个很好的例子，使用了重叠技术突出了评论数目。利用负margin和z-index 属性，外加一点点创意，你也可以做到。

优秀的3D文字特效

这是一种创建类似于Safari字体的巧妙方法：使用2种颜色创建两版相同，略微倾斜的文字，然后使用负margin将一版文字覆盖到另一版上，并留出1-2像素的差异。这样你就获得了具有可选性，而且对机器人爬虫友好的文字！从此再也不需要那臃肿又消耗带宽的jpeg和gif了。

简单2列布局

负margin也是一种创建简单2列自适应布局的好方法。2列自适应布局是一种拥有一个自适应宽度（liquid width）为100%的内容列和一个固定宽度侧边栏的布局。

HTML代码:

<div id="content"> <p>Main content in here</p> </div> 
<div id="sidebar"> <p>I’m the Sidebar! </p> </div>

CSS代码:

https://csswang.com/content {width:100%; float:left; margin-right:-200px;}
https://csswang.com/sidebar {width:200px; float:left;}

这样你就拥有了一个简单的两列布局，即使在IE6下也能正常的运行。现在，为了避免https://csswang.com/sidebar被https://csswang.com/content中的文字覆盖，加上

/* 防止文本被重叠 */
https://csswang.com/content p {margin-right:210px;}

如果运用得当，负margin也可以完全代替table标签，来构成灵活文档结构。这种结构是一种具有可访问性的SEO技术，可以完全按照你的意愿按几乎任何顺序来排列标记。Tom写了一篇文章，专门讨论用负margin来实现多列布局。

微调元素位置

这是负margin最常用，也是最简单的方法。如果你在9个div中插入第十个div，有时候可能因为某些原因无法对齐，使用负margin可以仅对第十个进行微调，而不用必须去修改其他9个元素。

Bug修复

文字和链接的问题

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

1. 链接无法点击;
2. 文字难以选中；
3. 失去焦点后，tab任何链接都会消失；

解决方法：

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

图片被截断

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

解决方法：

同样，给浮动元素加上position:relative，一切将会恢复正常。

总结

负margin因其自身不添加额外标记就能定位元素的能力在现代网页设计中占有一席之地。随着更多的用户升级浏览器（包括IE8）， 这项技术的前途看起来会非常光明，更多的网站也会依赖于它。

扩展阅读:

• margin负值各种应用
• 外边距margin叠加详解
• 应不应该使用inline-block代替float?
• 关于inline-block的问题

英文原文

本文链接：» https://www.csswang.com/exp/cssexp/3863

转载请注明本文来源出处。