负margin用法权威指南

ゞ浴缸里的玫瑰 2022-08-23 08:24 212阅读 0赞

> 本文由[陈陆扬][Link 1]根据[John Imbong][]的《[The Definitive Guide to Using Negative Margins][]》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：[http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins][http_coding.smashingmagazine.com_2009_07_27_the-definitive-guide-to-using-negative-margins]，以及作者相关信息
> 
> ——作者：[John Imbong][]
> 
> ——译者：[陈陆扬][Link 2]

早在1998年CSS2的建议中，table就渐渐淡出了舞台，逐渐被载入史册。也因为如此，CSS布局也变成了编码优雅的代名词。

在设计者用过的所有CSS概念中，负margin应当是最少被谈及的定位方法，这就像一种禁忌，每个人都使用它，但没人去讨论它。

#### 1、为负margin“平反” ####

我们在CSS中都会使用margin，但将margin设置成负数，那可能就不大好处理了。在网页设计中，人们对负margin用法的态度大相径庭，有的人非常喜欢，而有的人则认为这是魔鬼的工作。

id="iframeu1490106\_0" src="http://pos.baidu.com/qcim?rdid=1490106&dc=2&di=u1490106&dri=0&dis=0&dai=1&ps=755x111&dcb=BAIDU\_SSP\_define&dtm=BAIDU\_DUP\_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1465698138118&ti=%E8%B4%9Fmargin%E7%94%A8%E6%B3%95%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97\_margin%20%E6%95%99%E7%A8%8B\_w3cplus&ari=1&dbv=2&drs=1&pcs=1522x764&pss=1522x866&cfv=0&cpl=5&chi=1&cce=true&cec=UTF-8&tlm=1465698138&ltu=http%3A%2F%2Fwww.w3cplus.com%2Fcss%2Fthe-definitive-guide-to-using-negative-margins.html&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DZN5TXRKXdMXDufMAk46ukzp6kjtZjpN9SoffKAevATBt7aCGbn3ILPQ78253YeOUMzI7lMK\_MetRqvbSbv2FT4S58RQK2W6vTDl9suud3shJI02IBGr7yG-2K6y3RJmv%26wd%3D%26eqid%3Dbc088869001b448500000003575cc6dc&ecd=1&psr=1920x1080&par=1920x1040&pis=-1x-1&ccd=24&cja=false&cmi=7&col=zh-CN&cdo=-1&tcn=1465698138&qn=850ad4dec4293e89&tt=1465698137948.173.344.346" width="468" height="60" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="box-sizing: inherit; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">

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

#content { margin-left:-100px;}

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

A、负margin是绝对标准的CSS

这不是开玩笑。W3C甚至标注过：对于margin属性来说，负值是被允许的。这是Nuff说的，查看这篇 [文章][Link 3]会有更多详细内容。

B、负maring不是一种hack方法

千真万确，不能因为缺乏对负marign的理解，或者因为它长得像hack，就认为它是一种hack方法。除非你是用来修复自己在其他地方造成的错误。

C、不脱离文档流

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

D、完全兼容

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

E、浮动会影响负margin的使用

负margin不是你每天都用的CSS属性，应用时应小心谨慎。

F、Dreamweaver不解析负margin

DW的设计视图不会解析负margin。但问题是你为什么要在设计视图中检查你的网站呢？

#### 2、使用负margin ####

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

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

![deodesign][]

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

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

/* 元素向上移10px*/
    
    #mydiv1 { margin-top:-10px;}

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

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

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

#### 3、浮动元素上的负margin ####

考虑下以下这种情况

HTML

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

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

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

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

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

#### 3、实用技巧 ####

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

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

![deodesign][deodesign 1]

如果你有一列项目太长而无法垂直显示时，为什么不试试用分列的方式来代替它？负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>的相对位置，这样用起来会合适很多，很酷吧？

使用重叠产生强调

![deodesign][deodesign 2]

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

优秀的3D文字特效

![deodesign][deodesign 3]

这是一种创建类似于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

#content { width:100%; float:left; margin-right:-200px;}
    #sidebar { width:200px; float:left;}

这样你就拥有了一个简单的两列布局，即使在IE6下也能无错的运行。现在，为了避免\#sidebar被\#content中的文字覆盖，加上

/* 防止文本被重叠 */
    
    #content p { margin-right:210px;}
    
    /* 它是 200px + 10px, 10px是他们的间距*/

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

微调元素位置

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

#### 4、Bug修复 ####

文字和链接的问题

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

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

解决方法：给元素添加position:relative，便能正常运行！

图片被截断

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

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

#### 5、总结 ####

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

如果你对负margin有任何独到的经历，欢迎留言告诉我。

#### 6、扩展阅读 ####

1.   [The Positive Side of Negative Margins][]
2.   [CSS Negative Margins Algebra][Link 4]
3.   [Get Refreshed: Liquid Layouts With Simpler CSS and Without A Semantic Mess][Get Refreshed_ Liquid Layouts With Simpler CSS and Without A Semantic Mess]
4.   [Creating Liquid Layouts with Negative Margins][]
5.   [Margin Properties][]
6.   [Using Negative Margins][]
7.   [Swapping Column Positions in Web Page Layouts with Negative Margins][]
8.   [Exceptionally Negative][]
9.   [CSS Negative Margins][]
10.  [Horizontal Negative Margins][]
11.  [Negative CSS Margins Are Not Cool][]
12.  [Centering: Negative Margin][Centering_ Negative Margin]
13.  [css margin的相关属性，问题及应用][css margin]
14.  [你是否彻底了解margin属性？][margin]
15.  [由浅入深漫谈margin属性][margin 1]
16.  [不要告诉我你懂margin][margin 2]
17.  [负值之美：负margin在页面布局中的应用][margin 3]
18.  [重新认识margin和负margin的实际应用][margin_margin]
19.  [margin负值5种应用][margin_5]
20.  [关于负margin在微博的应用][margin 4]
21.  [Web布局连载——两栏固定布局（三）][Web]
22.  [Web布局连载——两栏固定布局（四）][Web 1]
23.  [Grids Layout Demo][]

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

> #### 关于陈陆扬 ####
> 
> 毕业于东北大学，从事前端开发，目前主要关注无线方面。对前端技术有强烈的兴趣，希望有机会和大家交流。[新浪微博][Link 2]

如需转载烦请注明出处：

英文原文：[http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins][http_coding.smashingmagazine.com_2009_07_27_the-definitive-guide-to-using-negative-margins]

中文译文：[http://www.w3cplus.com/css/the-definitive-guide-to-using-negative-margins.html][Link 1]

[Link 1]: http://www.w3cplus.com/css/the-definitive-guide-to-using-negative-margins.html
[John Imbong]: http://coding.smashingmagazine.com/author/john-imbong/?rel=author
[The Definitive Guide to Using Negative Margins]: http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
[http_coding.smashingmagazine.com_2009_07_27_the-definitive-guide-to-using-negative-margins]: http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins
[Link 2]: http://weibo.com/u/2008738631
[Link 3]: http://www.w3.org/TR/CSS2/box.html#margin-properties
[deodesign]: /images/20220721/3fdd06f3dba74ec190fab1712db436ad.png
[deodesign 1]: /images/20220721/d2bb8222a2fd486dbee1050abe53a8c1.png
[deodesign 2]: /images/20220721/b2f51bb17f874b1c8e120faf62851c6e.png
[Phlashers.com]: http://phlashers.com/blog/?p=180
[deodesign 3]: /images/20220721/f9751cf0cf21468da968531e405e8ece.png
[Link 4]: http://www.severnsolutions.co.uk/twblog/archive/2004/07/01/cssnegativemarginsalgebra
[The Positive Side of Negative Margins]: http://www.search-this.com/2007/08/01/the-positive-side-of-negative-margins/
[Get Refreshed_ Liquid Layouts With Simpler CSS and Without A Semantic Mess]: http://www.mindfly.com/blog/post/2009/01/Get-Refreshed-Liquid-Layouts-With-Simpler-CSS-and-Without-A-Semantic-Mess.aspx
[Creating Liquid Layouts with Negative Margins]: http://www.alistapart.com/articles/negativemargins/
[Margin Properties]: http://www.w3.org/TR/1998/REC-CSS2-19980512/box.html#margin-properties
[Using Negative Margins]: http://www.brainbell.com/tutorials/HTML_and_CSS/Using_Negative_Margins.htm
[Swapping Column Positions in Web Page Layouts with Negative Margins]: http://www.devarticles.com/c/a/Web-Style-Sheets/Swapping-Column-Positions-in-Web-Page-Layouts-with-Negative-Margins/
[Exceptionally Negative]: http://www.simplebits.com/notebook/2005/05/23/negative.html
[CSS Negative Margins]: http://www.communitymx.com/content/article.cfm?cid=B0029
[Horizontal Negative Margins]: http://www.brunildo.org/test/NegMOutH.html
[Negative CSS Margins Are Not Cool]: http://www.bennadel.com/blog/1174-Negative-CSS-Margins-Are-Not-Cool.htm
[Centering_ Negative Margin]: http://www.bluerobot.com/web/css/center2.html
[css margin]: http://www.zhangxinxu.com/wordpress/?p=48
[margin]: http://www.nowamagic.net/librarys/veda/detail/1608
[margin 1]: http://www.planabc.net/2007/03/18/css_attribute_margin/
[margin 2]: http://www.hicss.net/do-not-tell-me-you-understand-margin/
[margin 3]: http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
[margin_margin]: http://www.html5jscss.com/negative-margin-105.html
[margin_5]: http://fed.renren.com/archives/517
[margin 4]: http://m.oschina.net/blog/100579
[Web]: http://www.w3cplus.com/css/layout/fixed-layout/two-columns-3.html
[Web 1]: http://www.w3cplus.com/css/layout/fixed-layout/two-columns-4.html
[Grids Layout Demo]: http://lifesinger.googlecode.com/svn/trunk/lab/2008/grids_test1.html