# 稀飯版 Day30

Date: 2024/10/13

### 心得

在忙其他事的同時，用五條悟衝刺的速度趕完[金魚切版系列](https://youtube.com/playlist?list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo) (大概 13 天)。
0.2 秒的領域展開，好嘛。


金魚切版系列一路看下來，
最棒的三大優點：

+ <mark>實用</mark>：密集地介紹常用小技巧 (在 MDN 會瑣碎地散落各處)
+ <mark>實戰</mark>：刻了許多常見版型 (從老掉牙到 fancy)
+ <mark>速度快</mark>：不拖泥帶水

半小時看完就能收穫很多新的知識點，
當然這是第一天的情況，當越看越後面的時候，
新的知識點會開始慢慢變少了 (其實是因為很多知識點已經內化了)，
這是真確地會讓人感覺自己在進步。

以前還沒系統性學 CSS 的時候，錯把 CSS 當純博學在看，
反正套 A 屬性就有 A 效果、套 B 屬性就有 B 效果。結果：

欸？我的 `display: flex` 怎麼對這個子元素沒效果？
> 因為子元素給人家設定了 `position: absolute`，\
> 讓它脫離了 normal document flow，當然沒效果。

欸？ pseudo element 怎麼沒顯示出來？
> 因為人家預設是 `display: inline`，
> 你要用 `display: block`，設定寬高，人家才會顯示出來。\
> 至於在 `position: absolute` 的情況下可不設定 `display: block`，\
> 這是因為絕對定位會把元素轉型成 block element，\
> 你自然就不用再多寫 `display: block` (當然還是要設定寬高)。

族繁不及備載...
這些小知識點，其實就是 <mark>CSS 的一些 default behaviors</mark>、
或者 <mark>CSS 屬性之間的 synergy</mark>
(即 Amos 老師口中的「很多基礎觀念堆砌而成」)，
我想這才是「學好」CSS 的關鍵 (而不僅僅是學會)，也是最多人經常忽略的。