Question

为什么导航栏顶部有空隙？这是新手并尝试找出我做错了什么...我知道当我离开该职位时，将其固定在页面顶部。

可能是显示器：flex;那是造成问题的原因吗？预先感谢您的答复。

很显然，我必须写一整本书才能得到并回答这个问题。

html {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 22px;
        color: seashell;
        background-color: black;
        opacity: 0.9;
    }
    
    nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid seashell;
        position: fixed;
        width: 100%;
        z-index: 10;
        background-color: black;
    }
    
    #logo img{
        height: 50px;
    }
    
    nav ul {
        list-style: none;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    nav ul li {
        text-decoration: underline;
        padding-right: 20px;
    }
    
    #mission-statement-body {
        position: relative;
        top: 100px;
        background-image: url("images/img-mission-background.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 700px;
        width: 1200px;
        margin: 0 auto;
    }
    
    #mission-statement {
        text-align: center;
        background-color: black;
    }

<nav>
        <div id="logo">
            <img src="images/img-tea-cozy-logo.png" />
        </div>
        <ul>
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>
        </ul>
    </nav>

    <div id="mission-statement-body">
        <div id="mission-statement">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>

Answer 1

在使用position：fixed时，top属性设置为特定值，因此可以通过将top设置为0来避免这种情况。

Answer 2

TL：DR -只需将固定位置的元素的top设置为0，它就会“固定在浏览器屏幕的顶部”。

首先，请尝试以运行代码为例，以便更轻松地回答您的问题。您可以使用Codepen（我个人最喜欢的）或stackoverflow中的内联代码段（例如，我已经熟悉了一些工具（如代码突出显示）来模拟结果，下一步将是模拟{{3} }）。

我在CodePen上测试了您的代码，无法弄清为什么会有这种偏移，当我移除#mission-statement-body导航返回顶部时（浏览器正确），这很奇怪。

基本上，absolute和fixed之类的“围绕我的浏览器浮动”位置继承了最近的relative父级的位置，但是在您的情况下，没有这样的东西（因此它继承了来自神知道什么）。

因此，每次使用这些定位属性时，都尝试设置特定位置（例如top，left，bottom或right）。不要依赖默认的浏览器位置，因为它们总是会让您失望的，在Chrome上看起来不错，但在Firefox上却很奇怪。

Abed Putra

关于您的代码的其他一些观察结果：

出于多种原因，请尽量不要使用id来设置CSS规则，但基本上它们是非常特定的选择器（例如JS处理），并且任何CSS组件都应该是可复制和可扩展的（您可以2个nav，一个固定的和一个静态的，而使用id，则必须复制代码或执行一些不被视为最佳实践的变通方法。
尽量不要使用Helvetica，不仅大多数计算机都没有安装Helvetica，而且它们与您的次要版本（Arial）有很大的不同，并且单词的长度可能是开发时不会看到的问题，像是nave itens的折断线或按钮在Helvetica中变大，而在Arial中则不然。（此外，如果您想真正使用Helvetica，则Helvetica是一种付费字体，您必须购买它）
我认为最好在margin定位的元素上使用padding或relative，而不是top中使用的#mission-statement-body间距。另外，您无需设置position

希望有帮助

Answer 3

您尝试过吗？

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 10;
  background-color: black;
  top:0;
}

请检查一下...

   html {
    margin: 0;
    padding: 0;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 10;
  background-color: black;
  top:0;
}

#logo img{
    height: 50px;
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
}

nav ul li {
    text-decoration: underline;
    padding-right: 20px;
}

#mission-statement-body {
    position: relative;
    top: 100px;
    background-image: url("images/img-mission-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 700px;
    width: 1200px;
    margin: 0 auto;
}

#mission-statement {
    text-align: center;
    background-color: black;
}

<nav>
        <div id="logo">
            <img src="images/img-tea-cozy-logo.png" />
        </div>
        <ul>
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>
        </ul>
    </nav>

    <div id="mission-statement-body">
        <div id="mission-statement">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>

为什么我的导航顶部有空白？

3 个答案: