Question

 #header {
        margin:                      *<--This one*
        position: fixed;
        width:100%;
        background-color: black;
        font-family: Arial, Helvetica, sans-serif;
        overflow: auto;
        margin:0 auto;
        display: block;
    }

我正在构建一个网站，我遇到了<h1>元素落后于固定的导航栏。我试图为此找到最佳解决方案。

我发现许多人制作了一个额外的<div1>容器，其高度与导航栏的高度相同，然后使用另一个<div2>元素来编写他们要向用户显示的内容。< / p>

我遇到了这个解决方案的问题，实际上我的导航栏是响应式的。因此，我必须使用<div1>对@media元素做出响应。

然后试验保证金我发现留空白给我最优。它不需要我添加<div1>容器。

我发现这很有帮助。由于我是编程新手，我不知道这些类型的快捷方式是否不适合使用。

P.S。我使用了“Brackets”编辑器，Google Chrome中显示了实时预览。

编辑：#header是导航栏的容器并已修复。 position:fixed。

Answer 1

它会导致所有内容，直到下一个;被视为无效并被删除。

这不是捷径，它可以达到与不打margin: position: fixed;相同的效果。

Answer 2

CSS被设计为非常容忍错误。这有多种原因。

想象一下，您使用的是旧版浏览器可能无法理解的背景渐变。你的整个CSS代码都会中断。这就是CSS继续下一个可以找到的声明的原因。例如：

.foo {
  color: white;
  background: black;
  background: linear-gradient(red, yellow);
}

CSS从上到下读取文件，因此首先应用黑色背景，然后应用渐变背景。这将导致现代浏览器出现红/黄背景。

如果没有CSS错误处理，我们整个CSS将在旧浏览器中死亡。

但是，在您的情况下，CSS会读取以下语句：

 #header {
        margin: position: fixed;
}

这是一个语法错误，并且都不会应用这些错误。 CSS将继续使用您的width: 100%声明。

Answer 3

当你使用固定标题时，你应该给下一个等于固定标题高度的元素的margin-top，以便它在固定元素之后开始。但是只有当您的标题具有固定高度时，这才有效。如果您的标题不是固定高度并且随视口一起更改，则在body上添加一个resize函数，用于计算每个resize上标题的高度，并为marginTop提供与fixed元素之后的下一个元素相同的值。

＆＃13;

 
body{
  margin: 0;
}
#header {
top : 0;
position: fixed;
width:100%;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
height: 65px;
}
#nav-bar a{
display: block;
padding: 9px 16px;
text-align: center;
float: left;
color:azure;
text-decoration:none;
}
#nav-bar a:hover{
background-color: rgba(49, 248, 23, 0.94);
}
.nav-right{
float:right;
font-size: 17px;
text-align: center;
}
@media(max-width:600px){
#nav-bar{
    position: relative;
    display: flex;
    flex-direction: column; 
    
    
}
.nav-right{
    display: flex;
    flex-direction: column;
}
}
.logo {
font-family: 'Great Vibes', cursive;
font-size: 30px;
}

#header-img {
height:35px;
width:30px; 
}

h2 {
text-align: center;
background: linear-gradient(0deg,red,yellow);
padding: 14px;
}

#form {
display:flex;
justify-content: center;
margin-bottom: 21px;
}

#email {
height: 21px;
width: 250px;
border-radius: 3px;
border-color: #938e8e;
}

section {
position: relative;
top: 5px;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<title>The Bookworms Site</title>
<link href="style-sheet.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Limelight" rel="stylesheet"> 
  </head>
  <body onresize="myFunction()">
  
 
<main>
  <header id="header">
<div id="nav-bar">
    <a href="#Works" class="logo"><img src="book.jpg" id="header-img"> The Bookworms Site</a>
    <div class="nav-right">
        <a href="#About">About</a>
        <a href="#Features">Features</a>
        <a href="#Pricing">Pricing</a>
    </div>
</div>
  </header>
<div id="abc" style="margin-top: 65px;"> 
    <h2> Hurry!! Offers until Next 20 Hours!!</h2>
    <form id="form">
        <section>Email:</section>
        <input id="email" type="email" placeholder="Enter Your Email">
        <button type="submit" url="">Submit</button>
    </form>
    </div>
    </main>
    <script>
    function myFunction() {
       document.getElementById( "abc").style.marginTop = document.getElementById( "header").clientHeight + "px"
       
    }
    </script>
    </body>
    </html>

＆＃13;

如果我保持“保证金”空白而不用分号，会发生什么？

3 个答案: