利用flex来布局顶部菜单栏

安装vscode插件

css peek：快速定位到css定义的位置
微软的live preview 替换live server 因为这个好像不支持utf8

前置css知识

• span标签是一个行内容器，用于标记文本的一部分，或文档的一部分。它与 div 非常相似，但 div 是块级元素，而 span 是行内元素。
• p段落标签，可设置line-height属性
• text-align 设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。
• padding-block 设置块元素的上下内边距，在这里设置为 padding-block: 0.875rem;
• margin-inline 设置内容的左右边距，margin-inline: auto;意为左右居中。 margin-right: auto; 意为左对齐
• justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content
• align-items 属性设置所有直接子元素。在 Flexbox 中，它控制子元素在交叉轴上的对齐。在 Grid 布局中，它控制了子元素在其网格区域内的块向轴上的对齐。
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items
• calc 计算,注意变量与计算符号之间用空格隔开，否则会因为歧义出错 calc(var(--header-height) + 2.5rem);
• column-gap 属性用来设置元素列之间的间隔（gutter）大小。同理 grid-gap: 20px; 就是元素行列之间的距离
• flex-grow 设置flex中直接项所占比例 https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow 其中有测试的网站 https://developer.mozilla.org/zh-CN/play
• grid样式设置repeat(3, 1fr):repeat 函数用于重复指定的值。在这里，它重复了三次 1fr。1fr 是一个网格单位，表示可用空间的一等份。因此，repeat(3, 1fr) 将网格容器的宽度划分为三等份，每列占据一份。这通常用于响应式设计，因为你可以根据需要改变列的数量或大小，以适应不同的屏幕尺寸和布局需求。
• 菜单通常用ul无序列表
• grid布局详细解释 https://segmentfault.com/a/1190000022713952 配合 msdn https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-column

设置内容居中

.container {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 0.75rem;
}

设置容器中元素布局

.header__container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

子绝父相实现搜索框

div.search>input.form__input+button.search__btn

.search {
    width: 340px;
    position: relative;
}
.form__input {
    width: 100%;
}
.form__input {
    border: 1px solid var(--border-color-alt);
    padding-inline: 1rem;
    height: 45px;
    border-radius: 0.25rem;
    font-size: var(--small-font-size);
}
.search__btn {
    position: absolute;
    top: 24%;
    right: 1.25rem;
    cursor: pointer;
}