负margin功能介绍及用法总结

早在1998年CSS2的建议中，table就渐渐淡出了舞台，逐渐被载入史册。也因为如此，CSS布局也变成了编码优雅的代名词。
在设计者用过的所有CSS概念中，负margin应当是最少被谈及的定位方法，这就像一种禁忌，每个人都使用它，但没人去讨论它。
1、为负margin“平反”
我们在CSS中都会使用margin，但将margin设置成负数，那可能就不大好处理了。在网页设计中，人们对负margin用法的态度大相径庭，有的人非常喜欢，而有的人则认为这是魔鬼的工作。
一个负margin应该是这样设置的：

Static元素是没有设定成浮动的元素，下图说明了负margin对static元素的作用
当static元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。例如：

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

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

这是一种创建类似于Safari字体的巧妙方法：使用2种颜色创建两版相同，略微倾斜的文字，然后使用负margin将一版文字覆盖到另一版上，并 留出1-2像素的差异。这样你就获得了具有可选性，而且对机器人爬虫友好的文字！从此再也不需要那臃肿又消耗带宽的jpeg和gif了。
简单2列布局
负margin也是一种创建简单2列自适应布局的好方法。2列自适应布局是一种拥有一个自适应宽度（liquid width）为100%的内容列和一个固定宽度侧边栏的布局。
HTML

复