负margin的原理以及应用
负margin在布局中往往起到意想不到的效果，比如在多栏等高布局中就是用该技巧。
虽说网络上关于负margin的实践有很多，但对margin负值为什么会出现这样的效果却没有多少讲解，本篇的目的就是阐述负margin
产生或者作用的原因。
margin负值之所以可以修改元素在文档流中的位置，也可以改变元素的宽度，主要因为一个公式：
BoxWidth =ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;
上述公式很容易理解，熟悉box模型的都应该明白。
margin负值之所以起到了意想不到的作用，主要是因为该公式的各种计算导致了一些属性值的改变所引起。
口说无凭，先举几个例子：
ex1.
1 .m-20{margin-bottom: -20px;}
2 .m-200{margin-bottom: -200px;}
3 .l{float:left;}
4 .h200{height:200px;}
5 .m-20{margin-bottom:-20px;}
6 .m-200{margin-bottom:-200px;}
7
8
9 <div class="l pct40 bg-gray mr20">
10 <div class="h200 m-20 bg-teal pct40"></div>
11 </div>
12 <div class="l pct40 bg-gray">
13 <div class="h200 m-200 bg-teal pct40"></div>
14 </div>
第一个父div的子元素margin-bottom设为-20px;根据上述公式，由于子元素的height是定值，为200px，padding为0，带入可得ParentHeight=180px；正如图显示。
第二个父div的子元素margin-bottom设为-200px,同理可得ParentHeight= 0px，图上并没有显示。
ex2.
.eqh{padding-bottom: 220px;margin-bottom: -200px;}
.ovh{overflow:hidden;}
.cl{clear:both;}
<div class="cl w500 mt20 l ovh">
<div class="l w200 bg-silver mr20 eqh">
<p>这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题
</p>
</div>
<div class="l w200 bg-silver eqh">
<p>这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题
</p>
</div>
</div>
这就是margin负值应用最多的场景，多栏等高布局，总共2个子div，第一个子div的padding-bottom撑开子div的高度--两行文字高度为38px，padding的高度为220px，所以第一个子元素高度为258px，在不考虑第二个子div存在的情况下，父div高度=258-200-0-0-0-0-0=58px；
再计算第二个div，同样的公式，只是带入的数值不同，此时第二个子div的高度为334px，在考虑margin-bottom为-200px的情况，计算出父div高度=334-200=134px；
此后将计算结果综合，父div高度取最大值，为134px，这就是最后的浏览器呈现给我们的视图。
有些人会发现当元素的width属性设置为auto，或者不设置width时，margin-left或者margin-right为负值可能改变元素的大小，这种说法不严谨。
老方法，还是根据上述万能公式，左右margin的值（不论正负），在其父元素宽度(即ParentWidth)给定的情况下，会根据margin值的改变，来响应改变元素的width值，有些类似所谓的控制变量法！
另，现比较另外一个属性，vertical-align:-2px 与margin-bottom:-2px的区别所在。
对于vertical-align，我们主要用来元素的居中显示，很少用具体的值。但是有些情况，vertical-align的负值会有出其不意的效果。
二话不说，先上个demo：
.m-200{margin-bottom: -200px;}
.v-200{vertical-align: -200px;}
<div class="l pct40 bg-gray mr20"> <div class="h200 v-200 bg-teal pct40"></div> </div> <div class="l pct40 bg-gray"> <div class="h200 m-200 bg-teal pct40"></div> </div>
第一个div中，蓝色子元素采用了vertical-align：-200px，父元素高度和子元素相同；
第二个div中，蓝色子元素采用margin-bottom： -200px，父元素高度为0；
现在改变变量，将数值改为-20px，再看看：
可以明显看到，第一个div，子元素和父元素高度仍然相同，第二个div，父子元素不同，但仍满足上面的万能公式。
由此可以看出，通过vertical-align负值设置子元素，其呈现的位置和设置margin-bottom负值相同，不同点在于父元素框。
通过vertical-align负值设置的子元素的父元素的大小会增加，切不满足万能公式，而通过margin-bottom负值设置的子元素的父元素高度满足万能公式。
一言以蔽之，vertical-align会撑开父元素，而margin-bottom相应的根据上述公式计算会减小其高度。
