CSS 長度單位

在生活中我們有許多用於表示大小的單位，例如公里、公尺等，那在網頁中我們又要如何指定元素或文字的大小呢？
其實在網頁開發中也有許多長度單位，主要分為兩種：絕對單位及相對單位。

• 絕對單位：表示真實世界一個確切的尺寸，例如 cm (公分)、mm (毫米)、px (像素) 等
• 相對單位：基於其他屬性所計算出來的長度，例如 em、rem、% (百分比)、view 等

絕對單位

cm 公分
等同於現實中的的公分單位，通常用於需要列印的網頁，較少用於開發。
mm 毫米
等同於現實中的的毫米單位，較少用。
px (pixel) 像素
pixel (像素) 是最常用的單位之一，指的是螢幕上的一個個小光點，例如螢幕解析度為 2560×1664，就會有 2560x1664 個小點。所以 px 雖然是一個絕對單位，卻會因為設備不同造成實際大小不同。

相對單位

em
是 emphasize 的縮寫，指相對於當前元素 font-size (文字大小) 的倍數，假設 font-size 為 20px，則 1em = 20px, 2em = 40px。若當前元素沒有設定 font-size ，瀏覽器會一層一層往父元素上找，如果每一層都沒有則使用瀏覽器預設 font-size (通常是 16px)。

rem
rem 又稱為 root em，指相對於根元素 (html) font-size 的倍數，也就是說只要在 html 上設定字體大小，所有的 rem 都可以參考它進行大小設定，解決了 em 設計不良時牽一髮而動全身的缺點。

% 百分比
指相對其父元素大小的百分比。

範例：
父元素長寬為 400px x 400px，子元素設為 50% x 50%，則子元素長寬為 200px x 200px

.dad {
    background-color: rgb(254, 197, 197);
    width: 400px;
    height: 400px;
}
.dad>div {
    width: 50%;
    height: 50%;
    background-color: aqua;
}

<div class="dad">
    <div></div>
</div>

view 系列
view 系列表示與當前視窗的分為 view height(vh)、view width(vw)、min view(vmin)、max view(vmax) 四種。

• vh(view height)：指對瀏覽器視窗高度的比例，50vh 等於瀏覽器高度的 50%，也就是一半高
• vw(view width)：指對瀏覽器視窗寬度的比例，50vw 等於瀏覽器寬度的 50%
• vmin：指對瀏覽器較小邊的比例，若瀏覽器寬度 > 高度，則 50vmin 就是 50vh (選較小的作為單為)
• vmax：指對瀏覽器較大邊的比例，若瀏覽器寬度 > 高度，則 50vmax 就是 50vw (選較大的作為單為)

整理

顏色的表示方法

我們前面在設定顏色時，大部分都以顏色名稱來設定，例如 color: red;，這種方式確實可以達到改變顏色的目的，但對於複雜的網頁來說是遠遠不夠的，所以今天我們來介紹常見的顏色表示方法。

• 顏色名稱：為了方便，CSS 有多種定義好的顏色名稱，例如 red、blue 等
• 顏色值：分為 HEX、RGB、HSL 三種表示方法，可以精準的定義顏色
• 關鍵字：transparent、currentColor 等

顏色名稱

是最簡單直覺的寫法，顏色名稱不分大小寫，直接以值的形式寫在需要設定顏色的地方，在 MDN 中有完整的顏色名稱對照表可參考。

HEX

HEX 是最常見的顏色表示方法，由 # 符號和十六進制組合而成，例如 #c9c9c9。

RGB

RGB 分別代表紅(red)、綠(green)、藍(blue)，書寫格式為 rgb(0, 0, 0)括號裡三個數值分別表示紅綠藍三個顏色的強度，範圍為 0 ~ 255。
若需要設定顏色透明度時，可以在 rgb 後面加 alpha 設定透明度，透明度的範圍為 0.0 ~ 1.0，0 為完全透明 (看不到)，1 為完全不透明，寫為 rgba(0, 0, 0, 1)。

HSL

HSL 分別表示色調、飽和度、亮度，色調的範圍為 0 ~ 360；飽和度為 0% ~ 100%，越低則顏色越灰；亮度與飽和度相同，以百分比表示，越高則顏色越亮，0% 為黑色，100% 為白色。
與 RGB 相同，HSl 後面也可以加入透明度，寫為 hsla(0, 0, 0, 0.5) (0.5 為半透明)

transparent

指「透明」，表示完全透明顏色的快速寫法，用法為 color: transparent;

currentColor

指「當前的 color 值」，可以將其他需要設定顏色的屬性，例如邊框、背景等顏色與 color 統一，寫法為 border-color: currentColor;。

上一篇：[快速入門前端 19] CSS 三大特性：層疊性、繼承性、優先級
下一篇：[快速入門前端 21] CSS 常見屬性(1) 字體樣式和顏色
系列文章列表：[快速入門前端] 系列文章索引列表