负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相应的根据上述公式计算会减小其高度。