欢迎访问www.allbetgaming.com!

首页科技正文

上饶招聘网:浅析 CSS 中的边距重叠

admin2020-04-2434

浅析 CSS 中的边距重叠

边距重叠是什么

在说边距重叠之前,先以正常的头脑来思量若是你现在是浏览器引擎遇到这种情形应该怎么办?

现在有两个元素 div1 和 div2 紧挨着,中心没有它元素,它们的外边距就会发生重叠。div1 在左,div2 在右,div1 的 margin-left 为 20px, div2 的 margin-right 为 30px,那两个元素应该距离若干呢?

50px 吗?应该不是的,若是是 50px,那么 div1 的 margin-left 设置的没起作用,距离右边的元素并不是 20px, div2 元素的 margin-right 也没有起作用。

若是至少要让一个起作用,那应该要让数值大的 margin 起作用,由于若是让 margin 小的起作用有可能会影响显示。

以是当两个相邻的外边距重适时,取较大的 margin。

若是泛起magin 为负的情形,则在最大的正maigin中减去绝对值最大的负margin。(这样距离会比较远不会影响相互的显示)

若是没有正界限,则从零中减去绝对值最大的负界限。

上面说完了相邻元素的边距重叠,另有一种就是父子元素之间的边距重叠。

首先说明一下什么情形下父子元素之间会发生边距重叠,现在思量父元素中包罗一个子元素的情形,当子元素设置了 margin,父元素的 border,padding 为 0 的情形下才会发生边距重叠,若是父元素的 border 或 padding 不为 0,那么子元素外边距和父元素的外边距之间会隔着父元素的 border 或 padding,这样父子元素的 margin 就不会在一起了,也就不会发生边距重叠了。

下面连系图说明可能泛起的几种情形:

情形一:父元素: margin: 0, 子元素: margin-top: 60px; 我们的本意是子元素距离父元素的顶部 60px,父元素距离其它元素的 margin 为 0。可是我们可以看到父元素距离顶部有一段间距,这就是子元素设置的 margin-top,父子元素的 margin 发生了重叠,这和我们本意并不相符。

<section id = 'sec'>
  <style media="screen">
    #sec {
  background: yellowgreen;
}
  .child {
    height: 100px;
    margin-top: 60px;
    background: pink;
  }
</style>
<article class='child'>
  </article>
</section>

子元素

父元素

情形二:父元素: margin-top: 100px, 子元素: margin-top: 60px; 通过下面的效果可以看到,父元素距离外部元素的 margin-top 是 100px,验证了边距重叠时,会取较大的 margin 值。

<section id = 'sec'>
  <style media="screen">
    #sec {
  		background: yellowgreen;
			margin-top: 100px;
    }
    .child {
      height: 100px;
      margin-top: 60px;
      background: pink;
    }
	</style>
	<article class='child'>
  </article>
</section>

父元素

子元素

上饶招聘网:浅析 CSS 中的边距重叠 第1张

平时我们经常见到的外边距塌陷一样平常指的是下面这种情形。

父子元素的上方有一个元素,这个时刻又会发生边距重叠,而且当这个元素的 margin-bottom 的值要大于即是父子元素边距重叠后最终取得的 margin-top 的值时,父子元素的 margin-top 就不起作用了,这就是外边距塌陷

使用 MDN 上的外边距塌陷的例子吧。

.blue 元素的 margin-bottom 是 12px, .red-inner 元素的 margin-top 也为 10px。这个时刻 ,如图所示,.blue 元素和 .red-outer 元素之间的 margin 为 12px,.red-inner 元素的 margin-top 并没有起作用,发生了外边距塌陷。

  <section id = 'sec'>
    <style>
      .blue {
        height: 50px;
        margin-bottom: 12px;
        background: blue;
      }
  
      .red-outer {
        background: red;
      }

      .red-inner {
        height: 50px;
        margin-top: 10px;
      }
    </style>
    <div class="blue">blue</div>
    <div class="red-outer">
      <div class="red-inner">red inner</div>
    </div>
  </section>

上饶招聘网:浅析 CSS 中的边距重叠 第2张

若何解决边距重叠

就上面外边距塌陷的例子而言,本质问题在于子元素没有根据我们的本意距离父元素的顶部 10px,而是与父元素发生了边距重叠。

在最最先的时刻我们剖析过导致父子元素边距重叠的根本原因就是父元素的 border, padding 为 0,导致父子元素的外边距挨在一起,因此发生了边距重叠。

那么给父元素的 border或者 padding 一个值即可父子元素边距重叠的问题。

然则无缘无故给父元素一个 border 或 padding 值似乎不太合适,因此一样平常我们不接纳这种方式,而是触发父元素的 BFC

接下来就详细地讲一下 BFC 到底是什么,BFC 事实是个什么神奇的器械呢,为什么父元素触发了 BFC 就可以解决边距重叠了,为什么父元素触发了 BFC 就可以消灭浮动了呢?

关于 BFC 我们在下一篇文章 CSS 中你应该领会的 BFC 中一探事实。

,

进入sunbet官网手机版登陆

欢迎进入sunbet官网手机版登陆!Sunbet 申博提供申博开户(sunbet开户)、SunbetAPP下载、Sunbet客户端下载、Sunbet代理合作等业务。

转载声明:本站发布文章及版权归原作者所有,转载本站文章请注明文章来源!

本文链接:https://www.cotton-oil.com/post/741.html

网友评论

最新评论

  • 环球UG充值 09/27 说:

    欧博官网欢迎进入欧博官网(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。马克一下,怕忘了

  • 环球UG充值 09/27 说:

    欧博官网欢迎进入欧博官网(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。马克一下,怕忘了

  • Allbet手机版下载 09/26 说:

    欧博手机版下载欢迎进入欧博手机版下载(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。我已经入迷了

  • 环球UG电脑版下载 09/26 说:

    Allbet开户欢迎进入Allbet开户(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。很爱很爱的

  • UG环球客户端下载 09/26 说:

    欧博Allbet欢迎进入欧博Allbet官网(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。真实,希望继续更

  • 联博接口 09/26 说:

    Allbet Gmaing开户欢迎进入Allbet Gmaing开户(www.aLLbetgame.us):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。别错过这个了

  • 联博开奖网 09/25 说:

    ALLBET官网娱乐平台开户欢迎进入ALLBET官网娱乐平台开户:www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。看完了,还有推荐吗

  • www.allbetgame.us 09/25 说:

    联博开奖网www.326681.com采用以太坊区块链高度哈希值作为统计数据,联博以太坊统计数据开源、公平、无任何作弊可能性。联博统计免费提供API接口,支持多语言接入。平台很靠谱