安裝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;
}