margin的塌陷现象
标准文档流中，竖直方向的
margin不叠加，以较大的为准。
如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：
4.2 盒子居中margin:0 auto;
margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中了：
1 margin-left: auto;
2 margin-right: auto;
简写为
1 margin:0 auto;
注意：
1） 使用
margin:0 auto;的盒子，必须有width，有明确的width
2） 只有标准流的盒子，才能使用margin:0 auto;居中。
也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用
margin:0 auto;
3）
margin:0 auto;是在居中盒子，不是居中文本。文本的居中，要使用
text-align:center;
1 margin:0 auto; → 让这个div自己在大容器中居中。
2 text-align: center; → 让这个div内部的文本居中。
text-align还有
1 text-align:left; 没啥用，因为默认居左
2 text-align:right; 文本居右
4.3 善于使用父亲的padding，而不是儿子的margin
如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了
这个p有一个margin-top踹父亲，试图将自己下移
1 <div>
2 <p></p>
3 </div>
结果：
margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
所以，我们一定要善于使用父亲的padding，而不是儿子的margin。
4.4 关于margin的IE6兼容问题
IE6双倍margin bug
当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
解决方案：
1）使浮动的方向和margin的方向，相反。所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。
float: left;
margin-right: 40px;
2）使用hack（没必要，别惯着这个IE6）
单独给队首的元素，写一个一半的margin
<li class="no1"></li>
ul li.no1{
_margin-left:20px;
}
IE6的3px bug
解决办法：
不用管，因为根本就不允许用儿子踹父亲。所以，如果你出现了
3px bug，说明你的代码不标准。
