为什么div命名框在页脚上方？为什么页脚下面会有那么多额外的空白？答案

【问题标题】：Why does the div named boxes is above the footer? And why may the footer have all that extra white space below it?为什么div命名框在页脚上方？为什么页脚下面会有那么多额外的空白？
【发布时间】：2020-09-09 19:12:16
【问题描述】：

我的意思是关于带有类 box 的 div，它应该是 box1 和 box2 的容器，但它在下面，就在页脚上方。此外，如果您认为我可以更好/更有效地确定事情，告诉我也会很有帮助（例如，不需要某些 div，另一种方法会更好地定位元素，代码可以更简洁等。 ) 非常感谢。

HTML 代码（为简单起见，此处未复制标题和标题）：

<body>
  
    <main>
        <section class="introduction">
            <div class="container-intro">
        <h1 class="header1">The Future Is Here</h1>
            </div>
                <div class="boxes"> 
                    <div class="box1"><a href="#">Sign Up</a></div>
                    <div class="box2"><a href="#">Sign In</a></div>
                </div>
        </section>
    </main>
    
    <footer>
       <ul class="smedia-icons">
        <li><i class="fab fa-twitter-square"></i></li>
        <li><i class="fab fa-facebook"></i></li>
        <li><i class="fab fa-whatsapp-square"></i></li>
        <li><i class="fab fa-instagram-square"></i></li>
       </ul>

    </footer>
    
</body>
</html>

CSS：

   *{
    font-family: 'Orbitron', sans-serif;
    margin: 0px;
    color: white;
}

main{
background: linear-gradient(#ff416c, #ff4b2b);
margin-top: 0px;
}
.header1{
text-align: center;
padding: 270px;
color: white;
font-size: 90px;
}
footer{
  background-color: black;
  color: white;
  padding: 50px;
  position: relative;
  height: 100%;
}
.smedia-icons li{
  display: inline-block;
  list-style: none;
  font-size: 40px;
  margin: 10px;
  position: relative; top: 950px;
  
}
.boxes{
 text-align: center;
 display: flex;
 justify-content: center;
 font-size: medium;
 font-weight: bolder;

}

.box1{
  height: 30px ;
  width: 150px ;
  padding: 10px ;
  border: ;
  border-radius: 40px;
  background-color: black;
  margin: 0 auto;
  position: relative; top: -200px; left: 200px;

}
.box2{
  height: 30px ;
  width: 150px ;
  padding: 10px ;
  border: ;
  border-radius: 40px;
  background-color: black;
  margin: 0 auto;
  position: relative; top: -200px; left: -200px;

}
.box1:hover, .box2:hover{
  background-color: chartreuse;
}

【问题讨论】：

我在footer 下看不到空白。带有class boxes 的div 位于footer 上方，因为它在HTML 标记中位于footer 上方？见codepen.io/larrytherabbit/pen/NWNYNoj
我的意思是 div 框应该是 box1 和 box2 的容器，但实际上是在下面。同样在页脚中，我看不到社交媒体图标。关于空白，在您的链接中它不存在，但是当我在 Chrome 或 Safari 中打开文件时，它就在那里。
啊，好吧，因为 .boxes 没有定义任何高度或宽度，所以看起来像这样，但 box1 和 box2 完全在 .boxes 内。
那么 .boxes 在那里还可以，还是我应该改变它？另外，关于您的链接的问题：为什么页面有不同的字体并且没有出现社交媒体图标？如果您知道页脚下方的空白（出现在 chrome 和 safari 中）有什么问题，我们将不胜感激
看我的回答，盒子没问题。您的图标未在
标签内显示 b/c，不知道为什么。所以我使用了 flexbox 布局，它看起来不错。

<body> <main> <section class="introduction"> <div class="container-intro"> <h1 class="header1">The Future Is Here</h1> </div> <div class="boxes"> <div class="box1"> <a href="#">Sign Up</a> </div> <div class="box2"> <a href="#">Sign In</a> </div> </div> </section> </main> <footer> <div class="smedia-icons"> <i class="fab fa-twitter-square"></i> <i class="fab fa-facebook"></i> <i class="fab fa-whatsapp-square"></i> <i class="fab fa-instagram-square"></i> </div> </footer> </body>

*{ font-family: 'Orbitron', sans-serif; margin: 0px; color: white; } main{ background: linear-gradient(#ff416c, #ff4b2b); margin-top: 0px; } .smedia-icons { display:flex;justify-content:center; } .header1{ text-align: center; padding: 270px; color: white; font-size: 90px; } footer{ background-color: black; color: white; padding: 50px; position: relative; height: 100%; } .smedia-icons i{ font-size:45px; margin:0 15px; } .boxes{ text-align: center; display: flex; justify-content: center; font-size: medium; font-weight: bolder; } .box1{ height: 30px ; width: 150px ; padding: 10px ; border: ; border-radius: 40px; background-color: black; margin: 0 auto; position: relative; top: -200px; left: 200px; } .box2{ height: 30px ; width: 150px ; padding: 10px ; border: ; border-radius: 40px; background-color: black; margin: 0 auto; position: relative; top: -200px; left: -200px; } .box1:hover, .box2:hover{ background-color: chartreuse; }