前不久看到了久闻大名的双飞燕布局，其中用到的主要技巧就是margin的负值。margin的负值大致有以下几种效果。
在普通文档流中，margin的负值仿佛能减小元素在文档流中的大小。实际上，它的尺寸并没有变化，只是文档流在计算元素的位置的时候，会认为负边距把元素的尺寸缩小了。可以类比margin的正值来看。下面是例子：
这是没有设置margin的时候：（test是inline-block)
这是设置margin为10px时：
这是设置margin为-10px时：
但是需要注意的是，margin并没有影响到它前面的文档流。
其实类比正的margin来说，一个是向外填充了，然后会导致周围元素远离他，一个相当于将填充物抽走了，周围的元素会靠近它。
总之一句话：在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认得只是这个边界，而不管你实际的尺寸大小。
其实margin影响的就是元素的边界，不管正margin还是负margin，即使不在普通文档流中
在块级元素中，如果自身没有设置宽度，那么这个块级元素的宽度将会由父级元素的宽度决定。如果设置了margin值，margin为正时，那么宽度将会变小，即元素自身的宽度加上margin等于父级元素的宽度。一样的道理，如果margin为负，那么自身宽度加上margin等于父级元素的宽度，所以这时该元素的宽度就会变大。
eg:
margin为0：
margin为正：
margin为负：
这个技巧的用处：
消除列表的右边框：
经常会用到列表来显示信息，为了美观通常每个列表之间会设置一定的间距，但是需要对最右边的间距进行特别处理，设置它的margin-right:0， 下面就使用margin的赋值来实现这种效果：
代码：
<head> <style> body, ul, li { padding: 0; margin: 0; list-style-type: none; } .test { margin:0 auto; border: 2px solid black; width: 320px; height: 210px; background-color: gray; } .test ul { margin-right: -10px; } .test li { width: 100px; height: 100px; background-color: #ff0; margin-right: 10px; margin-bottom: 10px; float: left; } </style> </head> <body> <div class="test"> <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> <li>test6</li> </ul> </div> </body>和前面的类似，在浮动元素中使用margin的负值，将会使得元素的边界发生改变，根据边界的改动就能实现前面那些双飞燕布局等等。
下面先举一个简单的例子：
这是正常浮动的三个块级元素，block3由于第一行宽度不够被寄到了第二行
在这里我讲block3的margin：-40%，可以看到block3 到了第一行，这是因为它的左边界的判定变了，使得他的左边界加上它的宽度并不超过整个页面的宽度，所以留在了第一行。
这里我把margin设为了-70%，可以看到block3 继续 向左移动。
所以利用这个特性就可以把写在后面的元素却显示在前面，这也就是那些双飞燕布局，圣杯布局等的原理。说明白些也就是左右列固定，中间列自适应布局：
代码：
<body> <style> body { margin: 0; padding: 0; min-width: 600px; background-color: #ccc; } .main { width: 100%; float: left; } .mainbody { margin: 0 210px; height: 200px; background-color: #666; } .left { margin-left: -100%; background-color: #f60; float: left; width: 200px; height: 200px; } .right { float: left; width: 200px; margin-left: -200px; background-color: #f60; height: 200px; } </style> </head> <body> <div class="main"> <div class="mainbody">main</div> </div> <div class="left">left</div> <div class="right">right</div> </body>绝对定位元素的top、right、bottom、left等值是元素自身边界到最近的已定位祖先元素的距离，元素自身边界指的就是margin定义的边界，所以可以使用margin来控制元素的位置。
下面是使用绝对定位来进行居中的方法：
代码：
<body> <style> body { padding: 0; margin: 0; } div { width: 200px; height: 200px; background-color: gold; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; } </style> </head> <body> <div></div> </body>参考资料：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812
http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
