Question

我有一个最奇怪的问题。我的导航栏的问题是6.66% margin-bottom。当我将屏幕水平放大时，这个（垂直）边距增加，我完全难倒，为什么会发生这种情况？

＆＃13;

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  border: 1px solid black;
}
html,
body {
  position: relative;
  height: 100%;
  width: 100%;
}
body {
  position: relative;
  display: table;
}
main {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
}
body:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: url('Index-Background.jpg');
  background-position: center;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: -1;
}
section {
  margin-left: 2%;
  width: 26%;
  position: absolute;
  bottom: 26.66%;
  border: 1px solid black
}
section > div {
  margin-top: 10%;
}
nav {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 6.66%;
  bottom-left: 10%;
}
nav ul {
  display: flex;
  flex-flow: row nowrap;
}
nav ul li {
  padding: 0px 20px;
}
nav ul li a {
  color: white;
}

＆＃13;

<body>
  <main>
    <section>
      <h1>The Great Composers</h1>
      <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. rum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. The
        first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
    </section>
    <nav>
      <ul>
        <li><a href="#0">Bach</a></li>
        <li><a href="#0">Mozart</a></li>
        <li><a href="#0">Beethoven</a></li>
        <li><a href="#0">Chopin</a></li>
        <li><a href="#0">Schubert</a></li>
        <li><a href="#0">Tchaikovsky</a></li>
        <li><a href="#0">Gershwin</a></li>
        <li><a href="#0">Debussy</a></li>
      </ul>
    </nav>
  </main>
</body>

＆＃13;

Answer 1

百分比计算为您发现的包含块宽度的百分比。

https://drafts.csswg.org/css2/box.html#margin-properties

百分比是根据宽度计算的生成的框包含块。请注意，这是真的 'margin-top'和'margin-bottom'也是如此。

使用CSS百分比保证金定位

1 个答案: