在寫 CSS 的時候，除了屬性（像是字體大小、寬度、高度），單位的選擇也很重要。不同單位代表的意義不同，會影響到版面在不同裝置或不同層級下的表現。常見的單位有 px、%、em、rem，以下來做比較：

1. px（像素）

px 是最直觀的單位，代表螢幕上的一個固定點。

優點：穩定、精準，不會受外層影響。

缺點：缺乏彈性，可能在手機或電腦螢幕上看起來大小不合適。

2. %（百分比）

% 會依照「父元素」的大小來計算。

例如：父元素寬度是 200px，子元素寬度設 50%，結果就是 100px。

優點：適合響應式設計，可以自動依比例調整。

缺點：要清楚知道「相對的對象」，不然容易算錯。

3. em（相對父元素字體大小）

em 是相對單位，基準是父元素的字體大小。

例如：父元素字體大小 16px，子元素設 2em → 32px。

優點：可以隨著字體大小調整，保持比例。

缺點：多層巢狀時容易「越算越大」或「越算越小」。

4. rem（相對根元素字體大小）

rem 也是相對單位，但它的基準是「根元素 html 的字體大小」。

假設 html { font-size: 16px; }，那麼 1rem = 16px。

優點：比 em 穩定，不受父元素影響。

缺點：要記住根字體大小，否則心算不方便。

簡單比較

px：固定大小，最直覺。

%：相對於父元素，做 RWD 常用。

em：相對父字體大小，容易累積放大。

rem：相對根字體大小，穩定可控。

學習心得
雖然我還沒有實際去寫 CSS，但光是用文字理解，就能感受到這些單位背後的差別。px 感覺很直覺，就像一個固定的標準，不管環境怎樣都不會改變；% 則像是有彈性，可以隨著外層的大小變動，蠻適合拿來做自動調整；em 和 rem 讓我覺得比較特別，因為它們都跟字體有關，但一個看「父元素」，一個看「根元素」。光是這樣理解，就能想像到如果網站巢狀很多層，em 可能會變得難控制，而 rem 就比較穩定。
透過這樣的比較，我大概能理解為什麼網頁設計不會只用單一單位，而是要根據需求混合使用。雖然還沒有實際操作，但光用文字去認識，就能發現這些單位其實各有角色和特性，也讓我對之後真的去寫 CSS 有更多期待。