css中margin 负值使用一例
margin我很少会用到，一般用到也只是相对的去调整一个层的位置以达到一定效果。因为最近正在着手更新自己使用的主题，所以研究了一下各种布局的实现方法。发现使用margin负值形成的布局结构要比我们一般用层嵌套层再去分别左右浮动的方式要灵活很多。
margin 负值对文档流的影响
确切的说应该是margin负值对于层定位的影响，
没有浮动时
如果没有浮动的话，负的外边距会影响到各个层的高度、宽度，
当然这要看你设定的是水平还是垂直的负边距。有兴趣的可以去建立一个demo实验一下。
有浮动时
有浮动时当然要复杂的多，本例以向左浮动（float:left;）为例。
DEMO 地址：margin 负值布局演示
margin-demo
简单概括一下这个例子：
整个演示包括三个层 自左至右是 #gird-left、#main、#siderbar
在文档流的先后顺序却是#main、#gird-left、#siderbar
三个层的浮动都是向左（float:left;），而且三个层都在一个水平位置。
比较通俗的讲法就是如果你想实现如上布局就要外边距的负值大于当前水平的所有宽度。
css布局定义如下：
#main{
margin: 0 315px 0 160px;
}
以#main作为主要的文档流显示左右分别预留160像素和315像素来给剩下的两个层留出位置。
#gird-left{
margin-left: -100%;
}
左外边距-100%，可以将本层直接从文档流抽出直接显示在父级层最左上的位置。
#siderbar{
margin-left: -300px;
}
将#siderbar设定-300像素是因为本层有300像素宽，而上一个层宽度为100%；
这一个例子牵扯到了margin负值的多种综合应用，希望你能看懂。
浮动的margin负值布局，同一水平位置是会层叠的，
靠后的文档流会在上层，
如果看不懂给一个增强理解的例子：
margin--
margin负值布局的好处
从文档的先后顺序来看，我们不需要像传统布局那样，由上至下，由左至右的安排文档流代码的顺序。
很明显，作为一个网页内容的重要先后顺序为#main、#gird-left、#siderbar，
而我们阅读网页的习惯是将主要的东西放中间，其次左，最后右，
使用负值外边距我们完美的做到了这一点，
不但能优化搜索引擎而且还提高了阅读体验。
【案例解析】
一、三栏显示（无需浮动及额外标签）;
列表过长时，我们一般都会考虑通过浮动来使之显示为多列，其实换个思路也可以实现。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>negative margin 之列表三栏显示</title>
<style>
*{margin:0;padding:0;font-size: 14px;}
.goback{clear:both;height:30px;line-height:30px;text-align: center;}
ul {list-style:none;}
li {width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.3em;}
.col2 {margin-left:120px;}
.col3 {margin-left:240px;}
.top {margin-top:-2.6em;}
</style>
</head>
<body>
<ul>
<li class="col1">10家国企年招待费超29亿 被指仅用于吃喝</li>
<li class="col1">媒体称中国豪车市场因政府严控公车快速萎缩</li>
<li class="col2 top">菲发言人笑答射杀台渔民事件</li>
<li class="col2">情妇打越洋电话提供证据</li>
<li class="col3 top">雷政富涉嫌受贿罪被检察机关提起公诉</li>
<li class="col3">日称冲绳久米岛附近海域发现疑似中国海军潜艇</li>
</ul>
</body>
</html>二、叠加效果；
最常见的选项卡，当前项选中状态；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>negative margin 之叠加</title>
<style>
*{list-style:none;margin:0;padding:0;font-size: 12px;}
.clearfix:after {
clear: both;
display: block;
height: 0;
line-height: 0;
visibility: hidden;
content: "";
}
.clearfix {*zoom:1;}
.goback{clear:both;height:30px;line-height:30px;text-align: center;}
.demo{width:400px;}
.tab{
border-bottom:1px solid #66CC66;
}
.tab li{
float:left;
display:inline;
margin-left:8px;
}
.tab li a{
background-color:#CCFFCC;
border:1px solid #66CC66;
color:#666;
display:block;
margin-bottom:-1px;
padding:0 5px;
line-height:20px;
float:left;
font-weight:bold;
text-decoration:none;
}
.tab li .current,
.tab li a:hover{
background-color:#fff;
border-bottom:1px solid #fff;
_position:relative;
}
.cont{padding:10px;border:1px solid #6c6;border-top:0;}
</style>
</head>
<body>
<div class="demo">
<div id="demo2">
<ul class="tab clearfix">
<li><a href="#" class="current">Tab One</a></li>
<li><a href="#">Tab Two</a></li>
<li><a href="#">Tab Three</a></li>
<li><a href="#">Tab Four</a></li>
</ul>
</div>
<div class="cont">荒凉的旷野，一群暴虐的劫匪正在鞭挞一位美丽的姑娘玛丽亚（萝蕾丹娜·卡波莱特 Loredana Cappelletti饰）。幸得迪亚戈（弗兰科·尼罗 Franco Nero饰）的解救。他神秘而冷峻，拖着一副棺材漫步在泥泞的荒野上。迪亚戈带着玛丽亚来到荒凉的小镇，人们对他的到来充满好奇，更对这副棺材里隐藏的秘密而惶惶不安。</div>
</div>
</body>
</html>三、两列流式布局；
固定宽度的布局so easy,配合浮动轻松搞定两列自适应布局，三列同理。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>negative margin 之两列自适应布局</title>
<style>
*{list-style:none;margin:0;padding:0;font-size: 12px;}
.goback{clear:both;height:30px;line-height:30px;text-align: center;}
.layout{width:960px;margin:0 auto;background:#f5f5f5;}
.main{float:left;width:100%;height:300px;margin:0 -200px 0 0;background:#ccc;}
.main-wrap{margin:0 210px 0 0;}
.aside{float:left;width:200px;height:300px;background:#f5f5f5;}
</style>
</head>
<body>
<div class="layout">
<div class="main">
<div class="main-wrap">main</div>
</div>
<div class="aside">aside</div>
</div>
</body>
</html>四、去除多余的外边距；
图文混排，每行最后一个元素的margin值如何处理？单独设置类名消0？通过父层来裁切？使用margin负值吧！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>negative margin 之去除多余外边距</title>
<style>
*{list-style:none;margin:0;padding:0;font-size: 12px;}
.clearfix:after {
clear: both;
display: block;
height: 0;
line-height: 0;
visibility: hidden;
content: "";
}
.clearfix {*zoom:1;}
.goback{clear:both;height:30px;line-height:30px;text-align: center;}
.demo{width:320px;margin:0 auto;padding:10px 0;*overflow:hidden;background:green;}
.figure-list{margin:0 -10px 0 0;}
.figure-list li{float:left;width:100px;height:100px;margin:0 10px 10px 0;background:#f5f5f5;}
</style>
</head>
<body>
<div class="demo">
<ul class="figure-list clearfix">
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
<li>item-5</li>
<li>item-6</li>
</ul>
</div>
</body>
</html>
margin负值布局的缺点
作为层叠的文档流，我们要多做一些测试，以免各层文字内容重叠造成阅读困难
您可能感兴趣的文章：
CSS margin-bottom 属性
CSS margin-right 属性
CSS margin-left 属性
CSS margin-top 属性
CSS margin 属性
css常属性
css中负Margin你不知道的秘密
CSS手册简编：BOX属性
css把底部footer固定在页面底部
由浅入深漫谈margin属性