margin设置为负数

ゝ一世哀愁。 2021-06-26 16:06 473阅读 0赞

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

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

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

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

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

**A、负`margin`是绝对标准的`CSS`**  
这不是开玩笑。W3C甚至标注过：对于`margin`属性来说，负值是被允许的。这是Nuff说的，查看这篇文章会有更多详细内容。  
**B、负`margin`不是一种`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`。

## 4、实用技巧 ##

自从知道使用负`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写了一篇文章，专门讨论用负`margin`来实现多列布局。

**微调元素位置**

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

## 4、`Bug`修复 ##

**文字和链接的问题**

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

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

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

图片被截断

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

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

## 5、总结 ##

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

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

[deodesign]: /images/20210626/4bb0c12023b7407c90ebe1f9f752e0f3.png
[deodesign 1]: /images/20210626/8b96eaef12bd4efca2351853324b9ce1.png
[deodesign 2]: /images/20210626/67a0f59bca5340078ee7c89caeeeb2fa.png
[deodesign 3]: /images/20210626/e8eab15c2bf046d1997ed4b290283a83.png