margin负值在页面布局中的应用
http://www.w3school.com.cn/tiy/t.asp 预览工具
一、左右列固定，中间列自适应布局
此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。
<!DOCTYPE html> <html> <head> <style> body{ margin:0; padding:0; min-width:600px; } .main{ float:left; width:100%; } .main_body{ margin:0 210px; background:#888; height:200px; } .left,.right{ float:left; width:200px; height:200px; background:#F60; } .left{ margin-left:-100%; } .right{ margin-left:-200px; } </style> </head> <body> <div class="main"> <div class="main_body">Main</div> </div> <div class="left">Left</div> <div class="right">Right</div> </body> </html>
二、去除列表右边框
项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定式，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class，麻烦！！！利用负margin就可以实现下面这种效果：
<!DOCTYPE html> <html> <head> <style> body,ul,li{ padding:0; margin:0;} ul,li{ list-style:none;} #test{ width:320px; height:210px; background:#CCC; } #test ul{ margin-right:-10px; zoom:1; } #test ul li{ width:100px; height:100px; background:#F60; margin-right:10px; margin-bottom:10px; float:left; } </style> </head> <body> <div id="test"> <ul> <li>子元素1</li> <li>子元素2</li> <li>子元素3</li> <li>子元素4</li> <li>子元素5</li> <li>子元素6</li> </ul> </div> </body> </html>
三、负边距+定位：水平垂直居中
使用绝对定位将div定位到body的中心，然后使用负margin（content宽高的一半），将div的中心拉回到body的中心，已到达水平垂直居中的效果。
<!DOCTYPE html> <html> <head> <style> body{margin:0;padding:0;} #test{ width:200px; height:200px; background:#F60; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; } </style> </head> <body> <div id="test"></div> </body> </html>
四、去除列表最后一个li元素的border-bottom
列表中我们经常会添加border-bottom值，最后一个li的border-bottom往往会与外边框重合，视觉上不雅观，往往要移除。
如果li的border-bottom颜色与ul的border颜色是一样的时候，在视觉上是被隐藏了。如果其颜色不一致的时候还是有问题，给ul写个overflow：hidden；就可以解决这个问题。
<!DOCTYPE html> <html> <head> <style> body,ul,li{margin:0;padding:0;} ul,li{list-style:none;} #test{ margin:20px; width:390px; background:#F4F8FC; border-radius:10px; border:2px solid #D7E2EC; } #test li{ height:25px; line-height:25px; padding:5px; border-bottom:1px dotted #D5D5D5; margin-bottom:-1px; } </style> </head> <body> <ul id="test"> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> </ul> </body> </html>
http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/