首頁  >  文章  >  web前端  >  CSS 令人困惑?你並不孤單

CSS 令人困惑?你並不孤單

WBOY
WBOY原創
2024-07-30 19:30:35755瀏覽

CSS is confusing? You

當我開始 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn