Question

我试图在FreeCodeCamp上剖析Portfolio项目中提供的示例。请注意，Boostrap正在使用此设计。以下是HTML的相关部分：

<header id="banner" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <a href="#top" class="scrollable">LINK</a>
    <button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" class="navbar-toggle collapsed">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

    <nav id="navbar" role="navigation" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#top" class="scrollable">About</a></li>
        <li><a href="#portfolio" class="scrollable">Portfolio</a></li>
        <li><a href="#contact" class="scrollable">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

相关的CSS：

#banner .container{
  display:flex;
  flex-flow:row wrap;
  margin:0 auto;
  width:95%;
  max-width:1024px;
  justify-content:space-between;
  align-items:center;
}

#banner{
  background-color:#722872 !important;
  height:80px;
  box-shadow:0px 2px 2px 1px rgba(0, 0, 0, 0.2);
  border-color:#592059;
}

#banner .container::before, #banner .container::after{
  display:none
}

nav{
  font-size:13px;
  background:#722872;
  -webkit-transition:all .3s;
  transition:all .3s;
}

.nav>li{
  height:100%;
  text-transform:uppercase;
  font-weight:bold;
  letter-spacing:2px;
  display:inline-flex;
}

.nav>li a{
  color:#ffffff;
  padding:10px 20px;
}

.navbar-toggle{
  margin-right:0;
}

#top{
  height:80px;
  display:block;
}

我很惊讶地看到该行将容器类元素的:: after和:: before之前的显示设置为'none'，更令人惊讶的是，删除此设置会导致导航元素被挤压走得更近。我查看了MDN上的描述，没有任何内容跳出来解释这是如何工作的。您可以查看操作中的代码here。我的印象是伪元素对布局没有影响，除非他们明确地做了。

为什么在父元素中显示：none on :: after和:: before alter spacing？

0 个答案: