负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:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券