您在2022年絕對必須知道哪些CSS？

CSS 的發展日新月異，功能日益強大，學習曲線也隨之陡峭。本文將探討在當今前端開發中，哪些 CSS 知識是絕對必須掌握的。

Sacha Greif 曾公開質疑 CSS 是否過於龐大。近年來瀏覽器新增了諸多特性——容器查詢、相對顏色語法、級聯層、邏輯屬性、媒體查詢範圍、獨立變換、:has() 選擇器等等，未來還可能出現 CSS 切換、嵌套、顏色混合、滾動鏈接動畫、作用域樣式等。這無疑為新手和資深前端工程師都帶來了新的學習挑戰。

全面掌握所有 CSS 屬性及其工作原理已成為過去式。那麼，哪些 CSS 知識是絕對必須掌握的呢？

Vincas Stonys 和 Chris 分別嘗試列出了相關的清單。如果您需要列出最重要的五個 CSS 屬性和選擇器，我的清單如下：

writing-mode 屬性

writing-mode 屬性至關重要，尤其是在學習方面。它幫助您掌握包容性設計原則，無論用戶的語言如何，都能創建合適的佈局。理解 writing-mode 將引導您理解邏輯屬性和值，進而理解文檔流，並從塊、內聯、起始和結束等邏輯方向而非物理方向思考。

display 屬性

沒有紮實的 display 屬性知識，很難寫出優秀的 CSS 代碼。它既是屬性，也是創建佈局的框架。沒有它，就沒有 Flexbox 或 CSS Grid，因此它是理解這些重要特性的關鍵。

此外，display 屬性與 writing-mode 屬性相輔相成。一旦 writing-mode 使您了解了文檔流和邏輯方向，display 屬性正是您所需要的。您可以使用它來更改元素的正常流（例如，將塊元素更改為內聯元素）或開始佈局（例如，創建靈活的佈局上下文）。

margin、padding 和 border 屬性

這三個屬性是盒子模型的一部分，都用於控制間距和样式，都需要了解 CSS 長度單位。了解這些屬性的功能以及它們如何影響元素的計算大小，將極大地提高您的樣式控制能力，並消除元素大小不符合預期的常見 CSS 問題。

::before 和 ::after 偽元素

::before 和 ::after 是兩個偽元素，通常一起學習。它們可以用於創建各種 UI 效果，甚至完整的單 div 插圖，展現了 CSS 的強大功能。

@media 查詢

@media 查詢是創建靈活的響應式佈局和不同查看上下文的關鍵。隨著容器查詢的成熟，它可能會被取代，但目前，@media 查詢是學習響應式設計的絕佳入門。

此外，@media 查詢讓您初步了解 CSS 的條件特性。無論是基於設備類型（例如，屏幕或打印）還是瀏覽器視口條件（例如，寬度 >= 768px），@media 語法都非常有用，可以創建針對不同條件優化的佈局。 @media 查詢還與輔助功能相關，因為它可以根據用戶的偏好（例如，prefers-reduced-motion）應用樣式。

其他值得一提的屬性和選擇器

當然，還有許多其他重要的 CSS 屬性和選擇器，例如：

• calc()
• has()
• color
• font
• overflow
• position（尤其重要）
• z-index

學習 CSS 比死記硬背屬性列表更重要。這是一個循序漸進的過程，我選擇的五個屬性和選擇器可以幫助您打下良好的基礎，並為更深入地學習 CSS 做好準備。

以上是您在2022年絕對必須知道哪些CSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！