长度与角度单位

长度单位是 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

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

绝对长度单位

下表列出 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)px</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/PwoJxNw

<!-- 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 知识，透过这篇教学的介绍，应该可以更清楚各种单位的用法。

意见反馈