从1998年推荐CSS2开始，表格的使用逐渐消退，成为历史。正因为如此，CSS布局从此成为优雅代码的代名词。

对于设计师使用的所有CSS概念，负边距都应该作为讨论最少的定位方法记住。就像网上纹身一样——大家都会做，但是没人会说。(这就像一个网络禁忌——每个人都在做，但没有人想谈论它。)

改正它的名字

我们都用过CSS来获取外边距，但是当涉及到负边距的时候，我们似乎在往不好的方向走。在网页设计中使用负边距有两个极端。一个很喜欢，有人觉得是魔鬼的作品。

使用负边距，如下所示：

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

负边距通常用于小区域。但是之后你会发现它可以做很多事情。关于负利润率，你应该知道以下几点：

它们是完全有效的CSS

这不是开玩笑。W3C甚至说允许在外边框使用负边距。要了解更多信息，请点击本文

负边际不在黑

尤其如此。正是因为负边际没有被很好的理解，才造成了各种奇怪的问题。Hack只有在其他地方用来解决bug的时候

符合正常的文件流程

当在没有浮动的元素上使用负边距时，它们不会破坏正常的文档流。因此，如果您使用负边距向上微调元素，则以下所有元素都将向上微调。

很兼容

负边距基本上是所有现代浏览器都支持的(IE6的大多数情况下也是如此)

使用float后，会有不同的性能

负边距不是你通常使用的属性，所以使用时要格外小心。

Dreamweaver不理解

负边距不会在DW的设计窗口中显示效果。那为什么还用DW的设计窗口看效果呢？

和他一起工作

如果能正确使用，负边际是非常强大的。有两种情况负边际很重要。

在静态元素中使用负边距

5637680cc060c_articlex

静态元素是从未使用过float的元素。上图显示了一个具有负边距的静态元素。

当静态元素在顶部/左侧使用负边距时，它会在该特定方向上拖动元素，例如

/*向上移动元素10px

# mydiv 1 { margin-top :-10px；}

但是当你把负边距设置为相对底/右时，它不会把元素拉下或拉右，相反，它会把后面的元素向内拉，从而覆盖自己。

/*

#mydiv1之后的所有元素都将上升

移动10px，但是#mydiv1根本不移动

*/

# mydiv 1 { margin-bottom :-10px；}

如果未设置宽度，左右负边距将向两个方向拉动元素以增加宽度。这里边距的作用相当于填充

浮动时使用负边距

将以下内容添加到我们的html代码中：

div id='mydiv1'First/div

div id='mydiv2 '秒/div

如果对浮动元素使用负边距，它将创建一个空白，可以被其他元素覆盖。这种技术可以很好的用户进行流媒体布局。例如，一列具有的宽度，另一列具有固定的宽度，例如100px。

/*

浮动对面应用负边距

*/

# mydiv1 { float:leftmargin-right :-100 px；}

如果两个元素都使用左浮动并设置右边距-:-20px。#mydiv2会将#mydiv1视为宽度减少20px(所以会覆盖一部分)，但有趣的是#mydiv1根本不会改变，而是会保持原来的宽度。

如果负边距和宽度一样大，就会被完全覆盖。因为外边距、内边距、边框和内容加起来就是元素的宽度。如果负外部边距等于元素的宽度，则元素的宽度变为0px。

为实践而学习

既然我们知道在CSS2中使用负页边距是有效的，那么使用它可以为我们提供一些非常有趣的CSS技巧。

将单个列表更改为三列

如果你有一个垂直方向太长的列表，为什么不把它分成几列呢？负边距允许您在不添加任何浮动和标签的情况下完成。您会发现，用负边距实现这一点是多么简单，如下所示：

超文本标记语言

保险商实验所

li class='col1 '鸡蛋/li

li class='col1'Hamli

li class='col2 top '面包li

li class='col2'Butterli

li class=' col3 top 'Flourli

li class='col3 '奶油/li

/ul

半铸钢钢性铸铁(Cast Semi-Steel)

ul { list-style : none；}

Li { line-height :1.3 em；}

. col 2 { margin-left :100 px；}

. col 3 { margin-left :200 px；}。top { margin-top :-2.6 em；} /*敲弯器*/

将页边距-top:-2.6em添加到。顶部。所有元素都将完美对齐。使用负边距比使用相对定位好得多，因为您只需要在新列的个元素中添加负边距。很酷吧哈哈哈

重叠以强调

1694386175-563768 a3 BD 280 _ article x

故意重叠元素也是很好的设计隐喻。重叠效果可以增强深度感，从而突出特定元素。一个很好的例子，如上图，通过重叠吸引注意力。只需要使用z-index属性和一点创意就可以做到。

惊人的3D文本效果

383513466-5637687 aeec 4e _ article x

这是一个微妙的技巧。使用两种颜色的两个视图创建safari的轻微倾斜效果。然后，其中一个以负边距叠加在另一个上，保持1到2个像素的偏移。这样，您可以使用两种可选的、机器友好的斜体字体。不需要浪费大量的贷款去加载大图来达到这个效果

简单的两列布局

负边距也是创建简单的两列布局的好方法，其中一列的宽度是固定的，一列的内容是宽度的。

超文本标记语言

div id=' content ' pMain content in here/p/div

div id='侧边栏'我是侧边栏！/p /div

半铸钢钢性铸铁(Cast Semi-Steel)

#内容{ width :；float:leftmargin-right :-200 px；}

#侧栏{ width:200pxfloat:left}

哈哈，这样你就得到一个简单的两列布局。也可以在IE6中完美渲染。现在，为了防止#侧栏被#内容覆盖，只需添加：

/*防止文本重叠*/

# content p { margin-right :210 px；}

/*是200px 10px，10px是追加保证金。*/

如果使用得当，负外部边距可以提供灵活的文档结构，并分解表格的布局。灵活的文档布局是一种可访问性和SEO技能，它使您能够根据您的关注点以任何顺序组织您的html代码。这里是一篇讨论负边距在多栏版式中的应用的文章。

微调元件

这是使用负外部边距最常见和最简单的方法。如果你把第十个div插入其他九个div，不知道为什么排列不正确，用负边距调整这个div就方便了，不用改变其他九个div。

解决bug

文本和链接问题

在浮动中使用负边距可能会在旧浏览器中导致一些问题，例如：

取消链接

文本变得难以选择

失去焦点时按tab键失败

解决方法：只需添加position:relative。

这幅画被剪掉了

如果你恰好在办公室里不幸使用了IE6，在涉及到覆盖和浮动的时候，内容有时会突然被切断。

解决方法：同样，只需相对于浮动元素加上position :所有问题都迎刃而解。