Question

我正在学习HTML以构建一个简单的网站，并通过SASS对其进行样式设置。我在header标记中有一个main，footer和一个body，而header有一个nav，其中嵌套了几个{{ 1}}。

我正在尝试通过设置li来降低main的内容，但是这似乎是在降低整个内容以及标题。

我了解到，如果2个或更多元素共享一个公共空间，则一个元素会影响另一个元素的位置。我试图手动设置溢出属性，这似乎可以工作，但是我无法理解为什么这个（margin-top: 30vh）元素的垂直位置会影响main的位置。

header

* {
  -webkit-box-shadow: border-box;
  box-shadow: border-box;
}

header {
  position: fixed;
  z-index: 10;
  width: 100%;
}

body {
  background: #444;
  color: whitesmoke;
  height: 100%;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5;
}

main {
  padding: 4rem;
  height: 100%;
  /*Problem code*/
  margin-top: 30vh;
}

main .icons a {
  padding: 0.2rem;
}

main .icons a:hover {
  color: #eece1a;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
}

h1.lg-heading,
h2.lg-heading,
h3.lg-heading {
  font-size: 6rem;
}

h1.sm-heading,
h2.sm-heading,
h3.sm-heading {
  margin-bottom: 2rem;
  padding: 0.2rem 1rem;
}

（整个代码清单在Codepen。问题SCSS在第54行）

之前（第54行已注释）， Before

之后（第54行） After

我希望只有“嘿”和相关内容（基本上是<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/main.css"> <title>Title </title> </head> <body id="bg-img"> <header> <div class="menu-btn"> <div class="btn-line"></div> </div> <nav> <ul class="menu-nav"> <li class="nav-item"> <a href="#home" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="#projects" class="nav-link">Projects</a> </li> </ul> </nav> </header> <main id="home"> <h1 class="lg-heading"> Hey there! </h1> <h2 class="sm-heading"> Nice to meet you<br/>Hey</h2> <div class="icons"> <a href=""> <i class="fab fa-github fa-2x"></i> </a> </div> </main> <script src="js/main.js"></script> </body> </html>标签中的内容才能向下移动我30％的视口高度（30vh？）。有人可以请我解释一下我现在所缺少的或误解的吗？

Answer 1

此问题与position:属性有关。查看此资源，它将清除您的疑问position property

“主要”边距会影响未嵌套在其中的其他元素

1 个答案: