简单的聊一聊如何用CSS制作一个专业的头部页眉（Headers）
在本文中，我们将探索一些基本的技巧和提示，以帮助您使用CSS创建令人惊艳的页眉布局。我们并不过多关注设计，而是专注于创建布局，并了解创建布局时可能遇到的困难。
Space-Between在一个三列的页眉中无法居中
首先，让我们谈谈三列页眉，因为这是我最常见到实现错误的一种情况。
标记相对简单：
<header>
<nav>
<a href="/">ABC</a>
<div>
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">About us</a>
</div>
<div>
<a href="#">Login</a>
</div>
</nav>
</header>我将所有链接放在页眉的导航标签中。因此，这是一个非常简单的标记。通常情况下，导航应该在第一个和最后一个项之间居中对齐。
根据我的观察，这个问题已经成为前端社区中的新问题，类似于“居中一个div”的问题。因为许多开发人员会使用justify-content属性的space-between值来解决这个问题，但它实际上并不能将中间元素居中对齐。下面是使用justify-content属性的space-between值的相同导航标记，供比较参考：
造成这种效果的原因是左侧比右侧更宽。我们的中间元素在左侧和右侧元素之间居中对齐，但在页面的上下文中，中间元素并没有真正居中。
这是创建页眉时的第一个挑战：正确设置基本布局。在您确定要实现的布局以及如何实现之前，不要试图添加更多内容。
在我们继续之前，我在ProductHunt上花了几个小时寻找和评估三列页眉。它们中的大多数使用了我展示的将justify-content属性设置为space-between的技巧（因此，它们的导航并没有真正居中）。有些人试图绕过这个问题（例如，通过添加外边距），而其他人则通过绝对定位放弃了。当然，这些"hack"可以"解决"问题，但它们增加了复杂性。您的页眉将变得难以维护，当您再次回到页眉时会产生不好的感觉。话虽如此，这个"真正的解决方案"也有些技巧性。
下面是如何实现的方法：
header > nav {
display: flex;
}
header > nav > * {
display: flex;
}
header > nav > :first-child,
header > nav > :last-child {
flex: 1 1 0;
}
header > nav > :last-child {
justify-content: flex-end;
}效果如下图所示：
让我们来谈谈这个解决方案。
首先，我使用的选择器过于具体化。这样做是为了使嵌套关系更加清晰。
然后，页眉下的每个元素都是一个弹性容器。这也是不必要的。目前，它仅用于导航的最后一个子元素，以将其子元素移动到右侧。
这只留下了这条规则：flex: 1 1 0; 这是我们在这里的主要关注点。我将这条规则应用于第一个和最后一个元素。它允许它们增长和收缩，并将它们的基准大小设置为0像素。这就是整个"hack"的全部内容。因为我们将它们的基准大小设置为0，它们将等比增长，从而使我们的中间元素居中对齐。
当创建页眉布局时，当然，将页眉的中间元素居中对齐并不是我们面临的唯一挑战。
在较小的屏幕上隐藏导航栏
与使用justify-content属性的space-between值一样，上述模式使我们能够在布局保持完整的同时隐藏中间导航。当我们隐藏中间元素时，效果如下所示：
当然，将登录替换为按钮是很简单的。所以，我们来谈谈其他的事情吧。
假设我们的页眉看起来像这样：
<header>
<nav>
<a href="/">ABC Company</a>
<div class="desktop-navigation">
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">About us</a>
<a href="#">Terms of Service</a>
</div>
<div class="action-navigation">
<input type="search" aria-label="search" />
<a href="#">Sign Up</a>
<a href="#">Login</a>
</div>
</nav>
</header>现在，当我们的视口变小时，我们的页眉遇到了一个问题：
我们可以为此添加一个媒体查询，在其中用图标替换某些元素，或者简单地隐藏搜索。但是现代的CSS也允许使用不同的解决方案。
例如，我们可以创建一个容器查询。以下是更新后的代码示例：
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
color: #000;
text-decoration: none;
}
header {
padding: 1.5rem;
}
header > nav {
display: flex;
}
header > nav > * {
display: flex;
}
header > nav > :first-child,
header > nav > :last-child {
flex: 1 1 0;
}
header > nav > :last-child {
justify-content: flex-end;
}
header > nav > :last-child,
.desktop-navigation {
gap: 1.5rem;
}
.action-navigation {
container-type: inline-size;
container-name: action-navigation;
}
@container action-navigation (max-width: 400px) {
input {
display: none;
}
}我只添加了这些行：
.action-navigation {
container-type: inline-size;
container-name: action-navigation;
}
@container action-navigation (max-width: 400px) {
input {
display: none;
}
}当然，你可能会说你也可以用媒体查询来做到这一点。没什么了不起的。但容器查询的优势在于我们可以为容器指定最小宽度。我们不关心视口有多大，但我们知道：如果我们的容器宽度小于400像素，它会变得非常难看。这是我真正期待被广泛支持的功能之一。
粘性顶部导航栏
我仍然看到一些使用position: fixed实现顶部导航栏，即使sticky是更好的解决方案。
为什么sticky更好呢？请考虑以下代码：
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
color: #000;
text-decoration: none;
}
header {
padding: 1.5rem;
width: 100%;
position: fixed;
}
header > nav {
display: flex;
}
header > nav > * {
display: flex;
}
header > nav > :first-child,
header > nav > :last-child {
flex: 1 1 0;
}
header > nav > :last-child {
justify-content: flex-end;
}
.desktop-navigation {
gap: 1.5rem;
}
</style>
<header>
<nav>
<a href="/">ABC Company</a>
<div class="desktop-navigation">
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">About us</a>
</div>
<div class="action-navigation">
<a href="#">Login</a>
</div>
</nav>
</header>
<main>
Some content
</main>在这种情况下，页眉具有position: fixed。结果，主要内容区域移动到网站的顶部，因为文档中没有为页眉保留空间。它处于流动之外。
在这种情况下，解决方法是使用margin-top对主要内容区域进行偏移，将其移动到页眉下方。您可能会经常看到这种解决方法，即使在较新的网站上也是如此。问题在于，sticky属性并不总是存在的。它是比较新的属性。这就是为什么您仍然可以找到一些使用position: fixed而不是sticky的教程的原因。但是使用sticky，我们就不需要margin-top的偏移了。页眉元素仍然会占用空间，就好像它在文档中一样。
以下是带有position: sticky的更新代码示例：
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
color: #000;
text-decoration: none;
}
header {
padding: 1.5rem;
position: sticky;
top: 0;
}
header > nav {
display: flex;
}
header > nav > * {
display: flex;
}
header > nav > :first-child,
header > nav > :last-child {
flex: 1 1 0;
}
header > nav > :last-child {
justify-content: flex-end;
}
.desktop-navigation {
gap: 1.5rem;
}正如您所看到的，这种方法要简单得多。我们不需要为内容设置任意的偏移量。
就是这样了，朋友们！非常感谢您的阅读！
结束
您是否知道关于页眉布局的其他常见错误？或者您是否了解其他具有挑战性的元素？我很乐意在评论中了解更多！