最近有一个朋友问我关于margin的问题,才发现原来水平方向上的margin是不能叠加的。于是便查了查负margin(negative margin)。结果发现了这么有趣的东西。
左右列固定，中间列自适应布局
此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。
html:
<div class="main">
<div class="main_body">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
css:
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; }
效果：
去除列表有边框
项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定式，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，设置*margin-right:0; *这种方法需要动态判断为哪些li元素添加class，麻烦！！！利用负margin就可以实现下面这种效果：
html:
<div id="test">
<ul>
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
<li>子元素6</li>
</ul>
</div>
css:
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; }
