负margin

自从1998年CSS2做为推荐以来，表格的使用渐渐退去，成为历史。正由于此，从那之后CSS布局成为了优雅代码的代名词。

对于全部设计师使用过的CSS概念，负边距做为最少讨论到的定位方式要记上一功。这就像是在线纹身-每一个人都会作，可是没有人会谈论它。（It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.）

为其正名

咱们都使用过CSS得外边距，可是当谈到负边距的时候，咱们好像往差的方向发展啦。在网页设计中负边距的使用出现了两种极端，一种特别喜欢它，也有一些人认为这彻底就是魔鬼的做品。

负边距的使用以下：

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

负边距一般在小范围使用。可是接下来你会看到，它能作的事情不少。下面是一些你应该知道的关于负边距的事情：

他们是彻底有效的CSS
这不是在跟你开玩笑。W3C甚至都说，在外边框中使用负边距是容许的。要了解更多能够点击这篇文章
负边距不是在hack
这是尤为正确的。正是由于没有很好地了解负边距才是致使各类奇怪的问题。只有在被用来解决其余地方的bug的时候才是hack
它符合正常的文档流
当负边距使用在没有浮动的元素上时并不会破坏正常的文档流。因此付过你使用负边距把元素向上微调的话，全部后面的元素也会向上微调。
它是至关好的兼容性
负边距基本上被全部现代的浏览器支持（IE6的大部分状况也是）
当使用了float以后，会有不一样的表现
负边距不是你日常使用的属性，因此使用的时候要格外当心。
Dreamweaver不理解它
负边距不会在DW的设计窗口展现出效果。那你为何还用DW的设计窗口查看效果呢？
与其共事

负边距若是能够正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。

在static元素中使用负边距

一个static元素是一个没有使用过float的元素。上面的图片展现了一个static的元素使用负边距以后的状况。

当一个static元素在top/left使用负边距时，它把元素向这个特定的方向拉，好比

/* Moves the element 10px upwards */ #mydiv1 {margin-top:-10px;}

可是当你将负边距设置为相对bottom/right时，它并不会把元素向下或右拉，相反，它会把后面的元素往里面拉，从而覆盖本身。

/*
全部在#mydiv1后面的元素都会向上
移动10px，而#mydiv1一点都不会移动
*/ #mydiv1{margin-bottom:-10px;}

若是宽度没有设置，左右负边距会把元素向两个方向拉以增长宽度。在这里margin的做用至关于padding
在浮动中使用负边距

加入下面就是咱们的html代码：

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

若是对一个浮动的元素使用负边距，它会产生一个空白，其余元素就能够覆盖这一部分。这个技巧能够很好地用户流式布局。好比有一列宽度100%，另外一列有固定的宽度，好比说100px。

/*
A negative margin is applied opposite the float
*/ #mydiv1 {float:left; margin-right:-100px;}

若是两个元素都使用了左浮动而且设置margin-right:-20px。#mydiv2会把#mydiv1当作宽度缩小20px（因此会覆盖一部分），可是有趣的是#mydiv1并不会有任何变化，而是依然保持原先的宽度。
若是负边距和宽度同样大的话，它就会被彻底覆盖掉。由于外边距，内边距，边框和内容加起来等于元素的宽度。若是负外边距等于元素的宽度的话，那么该元素的宽度就会变成0px。
学以至用

既然咱们知道使用负边距在CSS2中是有效的，使用它能够给咱们提供一些很是有趣的CSS技巧。

把单个列表变成三列

若是你有一个列表垂直方向太长了，为何不把它分红几列呢？负边距可让你在不增长任何浮动和标签的状况下完成。你会发现用负边距实现这个是多么地简单，就像下面：

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。全部的元素会完美的对齐好。使用负边距会比使用相对定位好不少，由于你只须要给新的一列的第一个元素添加负边距便可。酷吧，哈哈哈

重叠来强调

故意重叠元素也是一种很好地设计隐喻。重叠效果能够加强深度感从而为突出特定元素。一个很好地例子就像上图同样，经过重叠来吸引注意力。只须要使用z-index属性和一点小创意你就能够作到。

惊艳的3D文本效果

这是一个精致的技巧。经过使用两个视图的两种颜色建立safari同样有点倾斜的效果。而后经过负边距来把其中一个叠加到另外一个上面，保持1到2像素的偏移。这样你就能够二道可选的，机器友好的倾斜字体。就不须要浪费不少贷款来加载大的图片来实现这个效果啦

简单的两列布局

负边距也是在流式布局中建立简单一列宽度固定，一列内容为宽度的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给掩盖，只要简单的加上：

/* Prevent text from being overlapped */ #content p {margin-right:210px;} /* It’s 200px + 10px, the 10px being an additional margin.*/

当适当的使用的时候，负外边距可以提供一个灵活的文档结构，完爆table的布局。灵活的文档布局是一种可访问性和SEO的技巧，经过它可以让你根据你的关注点以任意顺序组织你的html代码。这里有一个文章讨论了负边距在多列布局中的应用。

微调元素

这是负外边距最常也是最简单的使用方式。假如你把第十个div插入到9个其余的div中，不知道什么缘由没有正确的排列，使用负边距来调整这个div就不须要改变其余9个div了，很方便。

解决bug

文本和连接问题

在float中使用负边距可能会在旧的浏览器形成一些问题，好比下面的这些：

让连接不可点击
文本变得很难选择
失去焦点的时候按tab键失效

解决方法：只要添加position:relative，就能够啦。

图片被剪切啦

若是你运气很差恰好在办公室使用IE6，当遇到覆盖和浮动的时候内容有些时候回忽然被剪切掉。

解决方法：一样的只要给浮动元素加上position:relative，全部的问题就解决啦。

结论

负外边距可以在不使用任何额外标签的状况下定位元素让它在如今网页设计中占有一席之地。随着更多的用户使用更新的浏览器（包括IE8)，将来使用这些技巧的网站会变得更加有前景。

转载：http://segmentfault.com