長度與角度單位

長度單位是 CSS 裡使用頻率最高的單位，舉凡寬高、間距、字體大小甚至濾鏡效果，都會使用 px、pt、cm 之類的絕對長度單位，或使用百分比 %、em、rem 相對長度單位，甚至還會使用 vw、vh、vmin、vmax 顯示畫面單位，而角度單位則是在操作變形或色彩函式時會使用的單位，例如 deg、rad 等等，這篇教學除了會介紹 CSS 裡的長度與角度單位。

快速導覽：

• 絕對長度單位：px、pt、in、cm、mm、q、pc
• 相對長度單位：%、em、rem
• 相對顯示畫面單位：vw、vh、vmin、vmax
• 角度單位：deg、grad、rad、turn

絕對長度單位

下表列出 CSS 的絕對長度單位：

由於都是使用螢幕顯示網頁，因此最常使用的就是「px」或「pt」單位，px 是俗稱的「像素」，是螢幕顯示的最小單位，在現代作業系統大多是 96 dpi 的狀態下，每一英吋裡會有 96 像素，但 pt 是以 72dpi 為單位的每個「點」，也就是每一英吋裡會有 72 個點，如果在 96 dpi 的狀態下，每個點就會放大 96/72 倍。

除非具有「列印」功能的網頁需要特別運用 @meida 設定 in、cm、mm 等印刷單位，建議在螢幕上顯示時，首選 px，其次選擇 pt。

下方的範例執行後，紅色正方形是 100px x 100px，橘色正方形則是 100pt x 100pt，由於是 96dpi 的緣故，橘色正方形和灰色正方形使用 100px x 96 / 72 的尺寸完全相同。

線上展示：https://codepen.io/oxxo/pen/KKLmqEX

<!-- HTML 程式碼 -->
<div class="a">100px</div>
<div class="b">100pt</div>
<div class="c">100x(96/72)pt</div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 5px;
    float: left;
  }
  .a {
    background: red;
    width:100px;
    height:100px;
  }
  .b {
    background: orange;
    width:100pt;
    height:100pt;
  }
  .c {
    background: gray;
    width: calc(100px * 96 / 72);
    height: calc(100px * 96 / 72);
  }
</style>

相對長度單位

下表列出 CSS 的相對長度單位：

百分比「%」除了可以當作相對長度單位，也常出成為 CSS 函式的單位 ( 例如「CSS 函式 ( 漸層色 )」就會使用百分比控制色彩比例 )，不過如果使用百分比當作相對長度單位，需要注意如果應用於「長度」，會使用父元素的「寬度」進行計算 ( 除了高度屬性 )，如果應用於「文字大小」，則會使用父元素的「文字尺寸」。

下方的範例執行後，紅色 div 的寬度、padding、margin，都是根據父元素的「寬度」進行計算，而文字大小則是根據父元素的「文字尺寸」進行計算。

注意！如果使用 position: absolute; 進行絕對定位，則參考父元素的寬度會「包含 padding」。

線上展示：https://codepen.io/oxxo/pen/gOJWxNo

<!-- HTML 程式碼 -->
<div class="a">
  <div class="b">
    <div class="c">oxxo</div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border:1px solid #000;
  }
  .a {
    width: 50px;
    height: 100px;
    padding: 0;
    margin: 20px;
    font-size: 10px;
  }
  .b {
    width: 100%;      /* 參考寬度 50px x 100%  = 50px */
    height: 100%;     /* 參考高度 100px x 100% = 100px */
    margin: 100%;     /* 參考寬度 50px x 100%  = 100px */
    padding: 20%;     /* 參考寬度 50px x 20%   = 10px */
    font-size: 200%;  /* 參考文字 10px x 200%  = 20px */
    background: red; 
  }
  .c {
    width: 100%;      /* 參考寬度 50px x 100%  = 50px */
    height: 100%;     /* 參考高度 100px x 100% = 100px */
    background: orange;
  }
</style>

em 和 rem 主要是「字體大小」單位，會根據父元素的「文字尺寸」進行調整，em 是「父元素的字體大小 x 幾倍」，rem 則是「根元素的字體大小 x 幾倍」。

注意的是，如果將 em 或 rem 套用到「非字體大小」的樣式，會「先參考元素本身的字體大小」，如果元素本身「沒有設定」字體大小，才會參考「父元素的字體大小」。

下方的範例執行後，紅色 div 的寬度、padding、margin，都是根據父元素的「寬度」進行計算，而文字大小則是根據父元素的「文字尺寸」進行計算。

線上展示：https://codepen.io/oxxo/pen/pomPWgm

<!-- HTML 程式碼 -->
<div class="a">
  <div class="b">
    <div class="c">oxxo</div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  :root {
    font-size: 50px;
  }
  div {
    border:1px solid #000;
  }
  .a {
    width: 50px;
    height: 100px;
    padding: 0;
    margin: 20px;
    font-size: 10px;
  }
  .b {
    width: 3em;      /* 根據元素本身字體大小 20px x 3   = 60px */
    height: 2em;     /* 根據元素本身字體大小 20px x 2   = 40px */
    margin: 2.5em;   /* 根據元素本身字體大小 20px x 2.5 = 50px */
    padding: 1em;    /* 根據元素本身字體大小 20px x 1   = 20px */
    font-size: 2em;  /* 根據父元素字體大小   10px x 2   = 20px */
    background: red;
  }
  .c {
    width: 4rem;     /* 根據根元素本身字體大小 50px x 4   = 200px */
    height: 1rem;    /* 根據根元素本身字體大小 50px x 1   = 50px */
    background: orange;
  }
</style>

相對顯示畫面單位

下表列出 CSS 的相對顯示畫面單位：

vw、vh、vmin、vmax 這是四個非常好用的單位，會相對網頁「顯示畫面的寬度或高度」，來定義尺寸的大小，可以很方便的實現「RWD 自動適應寬度」的網頁，下方的範例開啟後，可用滑鼠拖拉瀏覽器視窗的長寬，就會看見 div 的寬度發生變化。

線上展示：https://codepen.io/oxxo/pen/pomPWgm

<!-- HTML 程式碼 -->
<div class="a">寬度 = 網頁寬 x 80%</div>
<div class="b">寬度 = 網頁高 x 30%</div>
<div class="c">寬度 = 網頁寬或高的最小值 x 50%</div>
<div class="d">寬度 = 網頁寬或高的最大值 x 50%</div>

<!-- CSS 程式碼 -->
<style>
  div {
    height: 50px;
    margin:5px;
    border: 1px solid black;
    font-size:12px;
  }
  .a {
    width: 80vw;
  }
  .b {
    width: 30vh;
  }
  .c {
    width: 50vmin;
  }
  .d {
    width: 50vmax;
  }
</style>

角度單位

下表列出 CSS 的角度單位：

各種角度的換算關係如下：

角度通常應用在「變形」或「顏色」，下方的範例執行後，會使用角度控制元素的旋轉角度和顏色 ( 參考「CSS 函式 ( 色彩模型 )」 )。

線上展示：https://codepen.io/oxxo/pen/KKLmXQP

<!-- HTML 程式碼 -->
<div>oxxo</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 50px;
    transform: rotate(45deg);
    background-color: hsl(0.5turn, 100%, 50%);
  }
</style>

小結

由於 CSS 主要負責控制網頁的「樣式」，時常會需要精準的指定位置、寬高或文字大小，因此「單位」是非常基本的 CSS 知識，透過這篇教學的介紹，應該可以更清楚各種單位的用法。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～