iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 30
3

前言

「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看。

「重新認識 CSS」系列文章發文於:

就如前言所說,經過這次的鐵人賽,透過看 spec 來學習 CSS 的真實面貌,而不是未經驗證或自行腦補來切版,讓自己能真正的「重新認識 CSS」。

這個月以來都是當天看 spec 當天寫文,所以每天都有鐵人賽的感覺。起初看 spec 的時候,腦中天旋地轉,好多以前重來沒看過的專有名詞,還好有好想工作室的夥伴跟我一起討論 spec,加快我理解的速度。

我第一次寫連續這麼多天的文章,雖然沒有像以前參加鐵人賽的前輩們說的那樣:「到後面幾天就會不知道要寫什麼了」,所以建議我在開賽前,事先規劃好這 30 天要寫什麼。不過我也沒有特別事先安排寫文的順序,因為我原本就預計會按照 CSS 2.2 的大綱來啃 spec,所以我不怕沒有主題可以寫,只怕自己理解的速度跟不上發文的速度 QQ,還好最後成功完賽 : )。

雖然鐵人完賽了,但這只是我學習旅程的開始,如果未來還有後續的學習紀錄,都會分享在我的 blog「Titangene Blog」,歡迎大家來光顧。如果想知道我之前寫過哪些專案,可以到我的 Github:titangene 看看。

下面是我對於這次系列「重新認識 CSS」的整理,讓大家可以更快知道哪些內容可以對應到哪些 spec。

簡介

簡介 CSS,並說明如何在 HTML 使用 CSS。系列如下:

對應 spec 的以下幾篇:

Selector

Selector 是寫 CSS 時,必須掌握的東西,熟悉 selector 才會選到正確的元素。而此系列是依據 Selectors Level 3 的分類來各別介紹的。系列如下:

對應 spec 的以下幾篇:

Values & Units

在開始認識 CSS 屬性之前,可以先認識屬性有哪些值和單位可以使用。系列如下:

對應 spec 的以下幾篇:

Assigning property values, Cascading, and Inheritance

了解在 CSS 中,繼承和權重這些重要的觀念之後,接著就可以更深入的了解 CSS 是如何處理屬性值的。系列如下:

對應 spec 的以下幾篇:

@media & @import rules

引入其他 CSS 檔案或在多個裝置、解析度、螢幕尺寸下要應用哪個 style sheet (樣式表),就需要了解如何使用 @media@import。系列如下:

對應 spec 的以下幾篇:

Box model

Box model 是用來描述 document tree 中的每個元素所產生的矩形框。系列如下:

對應 spec 的以下幾篇:

Visual formatting model

Visual formatting model 是用來描述 UA 會如何處理視覺媒體 (visual media) 的 document tree,document tree 中的每個元素都會根據 box model 來產生 0 個或多個 box。而這些 box 的位置和大小都是相對於稱為 containing block 的矩形框的邊緣計算的。系列如下:

對應 spec 的以下幾篇:

Controlling box generation

元素產生的 box 的 type,可以使用 display 屬性來指定,而 box 的 type 會影響 box 在 visual formatting model 中的行為。系列如下:

對應 spec 的以下幾篇:

Formatting context & Normal flow

Normal flow 中的 box 屬於某種 formatting context,可是 block 或 inline,不同的 box 會參與不同的 formatting context。block-level box 會參與 BFC,inline-level box 會參與 IFC。系列如下:

對應 spec 的以下幾篇:

Positioning schemes

在 CSS 2.2 中,positionfloat 屬性這些定位方案都可以對 box 進行佈局。系列如下:

對應 spec 的以下幾篇:

Layered presentation

除了水平和垂直的位置之外,如果想讓 box 可以有類似圖層的概念來排版,就能使用 z-index 屬性,這些 box 可以沿著 z 軸來排列,讓一個 box 可以疊在另一個 box 的上面。系列如下:

對應 spec 的以下幾篇:

Visual effects

當 block box 的內容超出 box 的 content edge 時,就可能會發生 overflow。使用 overflow 屬性就能指定超出的部份要如何處理 (例如:提供捲動機制來訪問被剪裁的內容)。而 visibility 屬性則可以指定是否要 render 由元素產生的 box,可用來顯示或隱藏 box。系列如下:

對應 spec 的以下幾篇:


上一篇
重新認識 CSS - z-index & stacking context
系列文
重新認識 CSS30
0
Askie Lin
iT邦新手 5 級 ‧ 2019-10-15 19:43:11

好詳細喔!

這樣以後自己找資料也比較方便!

/images/emoticon/emoticon07.gif

0
Titangene
iT邦新手 5 級 ‧ 2019-10-15 20:05:46

.

你在幹嘛?.....

JinWen iT邦新手 5 級‧ 2019-10-15 21:16:07 檢舉

應該是不小心按到XD

被發現了...因為用手機回應,點錯

/images/emoticon/emoticon06.gif

0
Titangene
iT邦新手 5 級 ‧ 2019-10-15 20:06:51

.

tsuifei iT邦新手 5 級‧ 2019-10-16 11:39:30 檢舉

這地方沒人,來這裡獨白好了。
重新認識其實是需要勇氣的,把自己 let self = [] 指向新的記憶體,重新面向已知的知識,相信這樣的知識是更內化的!

真的有這樣的感受,發現未來要走的路更加光明了許多 XD

0
Chris
iT邦新手 5 級 ‧ 2019-10-15 21:05:30

厲害!!

還是前端新手村比較厲害

/images/emoticon/emoticon32.gif

Chris iT邦新手 5 級‧ 2019-10-15 21:30:03 檢舉

不會啦!這一次學員寫 CSS 都已越我寫的了。QQ
感動

功勞在於饅頭的提點

/images/emoticon/emoticon42.gif

0
JinWen
iT邦新手 5 級 ‧ 2019-10-15 21:17:58

分類超詳細,還搭配spec也太佛,讚讚!

/images/emoticon/emoticon07.gif

0
letter liu
iT邦新手 5 級 ‧ 2019-10-15 22:26:03

學習了!!

/images/emoticon/emoticon25.gif

0
yachen
iT邦新手 5 級 ‧ 2019-10-15 22:39:58

超級用心的整理啊!!/images/emoticon/emoticon12.gif

希望以後還有劇可以追

/images/emoticon/emoticon08.gif

0
RURU Tseng
iT邦新手 5 級 ‧ 2019-10-15 23:31:43

恭喜完賽~~~~~~找時間一定要細讀一波~~~~~/images/emoticon/emoticon42.gif

/images/emoticon/emoticon07.gif

0
Penghua
iT邦新手 5 級 ‧ 2019-10-16 09:45:38

恭喜完賽~讓我不再需要在茫茫“規範海”中漫無目的的尋找著~/images/emoticon/emoticon01.gif

我還有 ru-master.org 可以參閱 !

/images/emoticon/emoticon32.gif

0
Howard
iT邦新手 5 級 ‧ 2019-10-16 21:53:30

賀完賽/images/emoticon/emoticon64.gif

感謝 Howard!

/images/emoticon/emoticon07.gif

0
阿展展展
iT邦好手 1 級 ‧ 2019-12-15 06:33:58

恭喜完賽 /images/emoticon/emoticon42.gif

/images/emoticon/emoticon42.gif

我要留言

立即登入留言