CSS 令人困惑？你並不孤單

當我開始 Web 開發之旅時，就像其他人一樣，我從基礎知識開始：學習 HTML，然後是 CSS，然後是 JavaScript。我只是想盡快建立東西，所以我只學到了足以讓自己開始建立專案的知識，然後當我偶然發現或發現需要時，我會找到新的東西。
這種方法的一個優點是我能夠快速建立小型項目，但這種方法也有一個主要缺陷，它在學習中留下了許多空白。

快進到現在，我正在學習ReactJS 並且很享受它，但是每當涉及到樣式組件時，這都是令人沮喪和違反直覺的，因為CSS 對我來說感覺不太清楚我的頭。我只是添加屬性來實現我想要的結果，但一路上的某個地方，感覺就像走在一座古橋上，等待著因一個錯誤的舉動而倒塌。

事實證明，CSS 並不像我想像的那麼令人困惑或困難。事實上，我只是沒有正確的 CSS 思維模型。
一般來說，人們將 CSS 視為屬性（鍵：值對）的集合，以實現所需的外觀或排列。但現在這對我來說已經改變了，希望你在本文結束時也能改變。

1. 不要將 CSS 視為屬性的集合。相反，將 CSS 視為版面模式的集合

• CSS 由許多不同的佈局演算法組成，稱為佈局模式。
• 每個版面模式就像 CSS 中自己的子語言一樣，可以重新定義和變更 CSS 屬性的使用方式。 換句話說，CSS 屬性是這些演算法的輸入。因此，專注於這些演算法如何使用這些屬性而不是記住一堆屬性。

2.每個佈局都是為了解決特定問題而設計的

• 預設版面模式：Normal Flow，用於建立數位文件。
• 它類似於 MS Word 版面配置演算法。 IE。標題和段落作為區塊垂直堆疊，而文字、連結和圖像等內容則位於這些區塊內。
• 除了一般流程之外，您最常使用的另外兩種佈局模式是 Flexbox 和 Grid 佈局。

3.Flexbox 與網格版面模式

• 同樣，每種佈局模式都是為了解決特定問題而創建的。可以這樣想： Flexbox 解決什麼問題？

• Flexbox 旨在以極大的靈活性將一組項目排列在行或列中，並控制每個項目在組內的分佈和對齊方式。

• Grid 解決了什麼問題？
  CSS 網格使得在二維中排列和對齊一組項目變得更加容易。它使您能夠靈活地控制每個單獨的項目或項目的行/列來操縱它們的排列。

一旦您開始從佈局模式集合的角度思考 CSS，以及它們如何影響和修改 CSS 屬性，即使 CSS 跨越很多行，您也會對事情的發生方式有一個更清晰的思維模型。

以上是CSS 令人困惑？你並不孤單的詳細內容。更多資訊請關注PHP中文網其他相關文章！