前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >负margin的原理以及应用

负margin的原理以及应用

作者头像
欲休
发布2018-03-15 15:04:56
1.1K0
发布2018-03-15 15:04:56
举报
文章被收录于专栏:前端杂货铺

  负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧。

  虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述负margin

产生或者作用的原因。

  margin负值之所以可以修改元素在文档流中的位置,也可以改变元素的宽度,主要因为一个公式:

    BoxWidth =ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;

  上述公式很容易理解,熟悉box模型的都应该明白。

  margin负值之所以起到了意想不到的作用,主要是因为该公式的各种计算导致了一些属性值的改变所引起。

  口说无凭,先举几个例子:

  ex1.

代码语言:javascript
复制
 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.

代码语言:javascript
复制
.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:

代码语言:javascript
复制

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档