CSS 值和單位

CSS 規則包含宣告，宣告又由屬性和值組成。CSS 中使用的每個屬性都有一個值型別，它描述了該屬性允許擁有的值種類。在本課中，我們將瞭解一些最常用的值型別、它們是什麼以及它們如何工作。

注意：每個CSS 屬性頁面都有一個語法部分，列出了你可以與該屬性一起使用的值型別。

預備知識	HTML 基礎（學習基本 HTML 語法）、CSS 基本語法、CSS 選擇器。
學習成果	理解屬性值可以有許多不同的型別，以及這些型別代表什麼。熟悉使用基本型別：數字、長度、百分比、顏色、影像、位置、字串和識別符號以及函式。理解什麼是絕對單位和相對單位，以及它們之間的區別。

什麼是 CSS 值？

CSS 值定義了每種 CSS 屬性的有效值型別。例如，你可以為color或border-color的值指定顏色，但不能指定長度或百分比。

在 CSS 規範中以及 MDN 的屬性頁面上，你會看到值型別被尖括號（<, >）包圍 — 例如<color>或<length>。當你看到值型別<color>對某個特定屬性有效時，這意味著你可以使用任何有效的顏色作為該屬性的值，如<color>參考頁面所列。

有時值型別和屬性可以有相同或相似的名稱 — 例如，有一個color屬性和一個<color>資料型別。你可以使用尖括號來確定在每種情況下你正在研究的是哪一個。HTML 元素也使用尖括號，但從上下文應該清楚你正在看的是哪一個。如果你不確定，可以嘗試在 MDN 上搜索它。

注意：你會看到 CSS 值型別被稱為資料型別。這兩個術語基本上可以互換 — 當你在 CSS 中看到某物被稱為資料型別時，它實際上只是值型別的一種花哨說法。術語值指你選擇使用的、由值型別支援的任何特定表示式。

在下面的示例中，我們使用顏色關鍵字設定了標題的文字顏色，並使用不同型別的顏色值（rgb()函式）設定了背景。

css

h1 {
  color: black;
  background-color: rgb(197 93 161);
}

CSS 中的值型別定義了允許的值的集合。這意味著如果你看到<color>是有效的，你無需懷疑可以使用哪種不同型別的顏色值 — 關鍵字、十六進位制值、rgb()函式等等。你可以使用任何可用的<color>值，前提是它們受你的瀏覽器支援。MDN 上每個值的頁面都會為你提供有關瀏覽器支援的資訊。例如，如果你檢視<color>頁面，你會看到瀏覽器相容性部分列出了不同型別的顏色值及其支援情況。

讓我們來看一些你可能會經常遇到的值和單位型別，並附帶示例，以便你可以嘗試不同的可能值。

數字、長度和百分比

你可能會在 CSS 中使用各種數字值型別。以下都歸類為數字：

資料型別	描述
`<integer>`	`<integer>`是一個整數，例如`1024`或`-55`。
`<number>`	`<number>`表示一個小數 — 它可能帶或不帶小數部分。例如，`0.255`、`128`或`-1.2`。
`<dimension>`	`<dimension>`是一個帶有單位的`<number>`。例如，`45deg`、`5s`或`10px`。`<dimension>`是一個涵蓋`<length>`、`<angle>`、`<time>`和`<resolution>`型別的大類。
`<percentage>`	`<percentage>`表示其他某個值的一部分。例如，`50%`。百分比值總是相對於另一個量。例如，一個元素的長度是相對於其父元素的長度。

長度

你最常遇到的數字型別是<length>。例如，10px（畫素）或30em。CSS 中使用的長度有兩種型別 — 相對長度和絕對長度。瞭解它們之間的區別很重要，以便理解事物最終會變得有多大。

絕對長度單位

以下都是絕對長度單位 — 它們不相對於任何其他事物，並且通常被認為總是相同的尺寸。

單位	名稱	等同於
`cm`	釐米	1cm = 37.8px = 25.2/64in
`mm`	毫米	1mm = 1/10th of 1cm
`Q`	四分之一毫米	1Q = 1/40th of 1cm
`in`	英寸	1in = 2.54cm = 96px
`pc`	派卡	1pc = 1/6th of 1in
`pt`	點	1pt = 1/72nd of 1in
`px`	畫素	1px = 1/96th of 1in

這些單位中的大多數在用於列印而不是螢幕輸出時更有用。例如，我們通常不在螢幕上使用cm（釐米）。你唯一會常用到的值是px（畫素）。

請注意，1px不一定等於一個物理裝置畫素。在高畫質顯示器上，它可能跨越多個物理畫素。同樣，CSS 中的1cm通常不對應於國際單位制（SI）米的一百分之一。在大型電視螢幕上，它通常比這更長。這些長度是感知上的：16px在手機、筆記型電腦或電視螢幕上，在典型觀看距離下看起來大致相同。

相對長度單位

相對長度單位是相對於其他事物而言的。例如：

em是相對於該元素的字型大小，或者當用於font-size時，是相對於父元素的字型大小。rem是相對於根元素的字型大小。
vh和vw分別相對於視口的高度和寬度。

使用相對單位的好處是，透過一些仔細的規劃，你可以讓文字或其他元素的尺寸相對於頁面上的所有其他內容進行縮放。有關可用相對單位的完整列表，請參閱<length>型別的參考頁面。

在本節中，我們將探討一些最常見的相對單位。

探究示例

在下面的示例中，你可以看到一些相對和絕對長度單位的行為。第一個盒子設定了畫素width。作為一個絕對單位，無論其他任何變化，這個寬度都將保持不變。

第二個盒子的寬度設定為vw（視口寬度）單位。此值相對於視口寬度，因此10vw是視口寬度的 10%。如果你更改瀏覽器視窗的寬度，盒子的大小應該會改變。但是，此示例是使用<iframe>嵌入到頁面中的，因此這不起作用。要檢視實際效果，你需要在自己的瀏覽器選項卡中開啟示例後嘗試。

第三個盒子使用em單位。這些單位相對於元素的字型大小。我在包含<div>（其類名為.wrapper）上設定了1em的字型大小。將其值更改為1.5em，你將看到所有元素的字型大小都會增加，但只有最後一個專案的寬度會變大，因為它的寬度是相對於該字型大小的。

按照上述說明操作後，嘗試以其他方式玩轉這些值，看看你會得到什麼。

html

<div class="wrapper">
  <div class="box px">I am 200px wide</div>
  <div class="box vw">I am 10vw wide</div>
  <div class="box em">I am 10em wide</div>
</div>

css

.box {
  background-color: lightblue;
  border: 5px solid darkblue;
  padding: 10px;
  margin: 1em 0;
}

.wrapper {
  font-size: 1em;
}

.px {
  width: 200px;
}

.vw {
  width: 10vw;
}

.em {
  width: 10em;
}

ems 和 rems

em和rem是你在調整盒子或文字大小等任何事物時最常遇到的兩種相對長度。瞭解它們的工作原理以及它們之間的區別非常重要，尤其是在你開始接觸更復雜的主題時，例如文字樣式或CSS 佈局。下面的示例提供了演示。

下一個示例是一組巢狀列表 — 我們總共有兩個列表，兩個示例的 HTML 都相同。唯一的區別是第一個具有ems類，第二個具有rems類。

首先，我們將<html>元素的字型大小設定為16px。

回顧一下，em單位表示“我父元素的字型大小”（如果用於font-size），以及“我自己的字型大小”（如果用於其他任何事物）。具有ems類的<ul>內部的<li>元素從其父元素獲取大小。因此，每個連續的巢狀級別都會逐漸變大，因為每個級別的字型大小都設定為1.3em — 是其父元素字型大小的 1.3 倍。

回顧一下，rem單位表示“根元素的字型大小”（rem 代表“root em”）。具有rems類的<ul>內部的<li>元素從根元素（<html>）獲取大小。這意味著每個連續的巢狀級別不會持續變大。

但是，如果你在 CSS 中更改<html>元素的font-size，你會發現所有其他內容都會相對於它而變化 — 包括rem和em大小的文字。現在就在 MDN Playground 中嘗試一下。

html

<ul class="ems">
  <li>One</li>
  <li>Two</li>
  <li>
    Three
    <ul>
      <li>Three A</li>
      <li>
        Three B
        <ul>
          <li>Three B 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul class="rems">
  <li>One</li>
  <li>Two</li>
  <li>
    Three
    <ul>
      <li>Three A</li>
      <li>
        Three B
        <ul>
          <li>Three B 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

css

html {
  font-size: 16px;
}

.ems li {
  font-size: 1.3em;
}

.rems li {
  font-size: 1.3rem;
}

百分比

在很多情況下，百分比的處理方式與長度相同。百分比的特點是它們總是相對於某個其他值設定的。例如，如果你將元素的font-size設定為百分比，它將是該元素父級font-size的百分比。如果你將百分比用於width值，它將是父級width的百分比。

在下一個示例中，兩對百分比大小和畫素大小的盒子具有相同的類名。每對中的盒子寬度分別為40%和200px。

不同之處在於，第二組兩個盒子位於一個寬 400px 的包裝器內。第二個 200px 寬的盒子與第一個盒子的寬度相同，但第二個 40% 的盒子現在是 400px 的 40% — 比第一個窄得多！

嘗試改變包裝器的寬度或百分比值，看看它是如何工作的。

html

<div class="box px">I am 200px wide</div>
<div class="box percent">I am 40% wide</div>
<div class="wrapper">
  <div class="box px">I am 200px wide</div>
  <div class="box percent">I am 40% wide</div>
</div>

css

.box {
  background-color: lightblue;
  border: 5px solid darkblue;
  padding: 10px;
  margin: 1em 0;
}
.wrapper {
  width: 400px;
  border: 5px solid rebeccapurple;
}

.px {
  width: 200px;
}

.percent {
  width: 40%;
}

下一個示例中的字型大小以百分比設定。每個<li>的font-size為80%；因此，巢狀列表項會隨著它們從父級繼承大小而逐漸變小。

html

<ul>
  <li>One</li>
  <li>Two</li>
  <li>
    Three
    <ul>
      <li>Three A</li>
      <li>
        Three B
        <ul>
          <li>Three B 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

css

li {
  font-size: 80%;
}

請注意，儘管許多值型別都接受長度或百分比，但有些值型別只接受長度。你可以在 MDN 屬性參考頁面上檢視接受哪些值。如果允許的值包含<length-percentage>，則可以使用長度或百分比。如果允許的值只包含<length>，則不能使用百分比。

數字

有些值型別接受無單位數字；例如opacity屬性，它控制元素的透明度（它有多透明）。此屬性接受介於0（完全透明）和1（完全不透明）之間的數字。

在下面的示例中，嘗試將opacity的值更改為0到1之間的各種小數，看看盒子及其內容如何變得或多或少透明。

html

<div class="wrapper">
  <div class="box">I am a box with opacity</div>
</div>

css

.wrapper {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
  background-repeat: no-repeat;
  background-position: bottom left;
  padding: 20px;
}

.box {
  margin: 40px auto;
  width: 200px;
  background-color: lightblue;
  border: 5px solid darkblue;
  padding: 30px;
  opacity: 0.6;
}

注意：當你在 CSS 中使用數字作為值時，它不應該被引號包圍。

顏色

顏色值可以在 CSS 中的許多地方使用，無論你是指定文字、背景、邊框等的顏色。CSS 中有多種設定顏色的方法，允許你控制許多令人興奮的屬性。

現代計算機中可用的標準顏色系統支援 24 位顏色，透過不同紅色、綠色和藍色通道的組合，每個通道有 256 個不同的值（256 x 256 x 256 = 16,777,216），可以顯示約 1670 萬種不同的顏色。

在本節中，我們將首先介紹最常見的顏色指定方式：使用關鍵字、十六進位制和rgb()值。我們還將快速瞭解其他顏色函式，使你能夠識別它們或嘗試不同的顏色應用方式。

你很可能會決定一個調色盤，然後在整個專案中使用這些顏色——以及你最喜歡的顏色指定方式。你可以混合搭配顏色模型，但通常最好在整個專案中使用相同的顏色宣告方法以保持一致性！

顏色關鍵字

你會在許多 MDN 程式碼示例中看到顏色關鍵字（或“命名顏色”）。由於<named-color>資料型別包含非常有限的顏色值，因此它們不常用於具有複雜設計語言的生產網站。另一方面，命名顏色在程式碼示例中用於明確告訴使用者預期的顏色，以便學習者可以專注於所教授的內容。

在下一個示例中，嘗試使用不同的顏色關鍵字，以便更好地瞭解它們的工作原理。你可以使用<named-color>參考頁面查詢它們。

html

<div class="wrapper">
  <div class="box one">antiquewhite</div>
  <div class="box two">blueviolet</div>
  <div class="box three">greenyellow</div>
</div>

css

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}
.one {
  background-color: antiquewhite;
}

.two {
  background-color: blueviolet;
}

.three {
  background-color: greenyellow;
}

十六進位制 RGB 值

你可能會遇到的下一種顏色值型別是十六進位制（hex）程式碼。

十六進位制數字使用0-9和a-f的 16 個字元，因此整個範圍是0123456789abcdef。每個十六進位制顏色值由一個井號/磅符號（#）後跟六個十六進位制字元組成（例如#ffc0cb）。每對十六進位制字元代表 RGB 顏色中的一個通道——紅色、綠色和藍色——並允許我們為每個通道指定 256 個可用值中的任何一個（16 x 16 = 256）。

這些值不如關鍵字直觀地定義顏色，但它們用途更廣，因為你可以用它們表示任何 RGB 顏色。

在下一個示例中，嘗試更改值以檢視顏色如何變化。

html

<div class="wrapper">
  <div class="box one">#02798b</div>
  <div class="box two">#c55da1</div>
  <div class="box three">#128a7d</div>
</div>

css

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}

.one {
  background-color: #02798b;
}

.two {
  background-color: #c55da1;
}

.three {
  background-color: #128a7d;
}

注意：你可能會看到用三個字元而不是六個字元書寫的十六進位制顏色值。這是一種速記，當每對字元相同時可以使用。例如，#ff00ff和#f0f是等效的。你可能還會看到用八個（或四個）字元書寫的十六進位制顏色值，其中第四個值表示前三個值的 alpha 透明度 — 例如#ff00ff66。

RGB 值

要直接建立 RGB 值，rgb()函式接受三個引數，分別代表顏色的紅、綠和藍通道值，並可選地接受一個由斜槓（/）分隔的第四個值，代表不透明度，其方式與十六進位制值大致相同。RGB 的區別在於，每個通道不是由兩個十六進位制數字表示，而是由一個介於0和255之間的十進位制數字或一個介於0%和100%之間的百分比表示（但不能混合使用這兩種方式）。

讓我們重寫上一個示例以使用 RGB 顏色。

html

<div class="wrapper">
  <div class="box one">rgb(2 121 139)</div>
  <div class="box two">rgb(197 93 161)</div>
  <div class="box three">rgb(18 138 125)</div>
</div>

css

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}
.one {
  background-color: rgb(2 121 139);
}

.two {
  background-color: rgb(197 93 161);
}

.three {
  background-color: rgb(18 138 125);
}

帶有不透明度的 RGB 示例

在下一個示例中，我們向彩色盒子的包含塊添加了背景影像。然後，我們將盒子設定為具有不同的不透明度值 — 請注意，當 alpha 通道值較小時，背景會顯示得更多。如果你將此值設定為0，它將使顏色完全透明，而1將使其完全不透明。介於兩者之間的值會為你提供不同級別的透明度。

嘗試更改 alpha 通道值以檢視它如何影響顏色輸出。

html

<div class="wrapper">
  <div class="box one">rgb(2 121 139 / .3)</div>
  <div class="box two">rgb(197 93 161 / .7)</div>
  <div class="box three">rgb(18 138 125 / .9)</div>
</div>

css

.wrapper {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
  padding: 40px 20px;
}

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}

.one {
  background-color: rgb(2 121 139 / 0.3);
}

.two {
  background-color: rgb(197 93 161 / 0.7);
}

.three {
  background-color: rgb(18 138 125 / 0.9);
}

注意：對顏色設定 alpha 通道與我們之前提到的使用opacity屬性有一個關鍵區別。當你使用opacity時，你會使元素及其內部的所有內容都透明，而使用帶有 alpha 引數的 RGB 只會使你指定的顏色透明。

使用色相指定顏色

如果你想超越關鍵字、十六進位制和rgb()來定義顏色，你可能想嘗試使用<hue>。色相是值型別，它允許我們區分或比較紅色、橙色、黃色、綠色、藍色等顏色。關鍵概念是你可以用<angle>指定色相，因為大多數顏色模型都使用色輪來描述色相。

有幾個顏色函式包含<hue>分量，包括hsl()、hwb()和lch()。其他顏色函式，如lab()，根據人類所能看到的顏色來定義顏色。

如果你想了解更多關於這些函式和顏色空間的資訊，請參閱使用 CSS 為 HTML 元素應用顏色指南、列出所有在 CSS 中使用顏色的不同方式的<color>參考，以及概述 CSS 中所有顏色型別和使用顏色值的屬性的CSS 顏色模組。

HWB

在 CSS 中使用色相的一個很好的起點是hwb()函式，它指定了一個srgb()顏色。這三個部分是：

色相（Hue）：顏色的基本色調。它接受一個介於0到360之間的<hue>值，表示色輪周圍的角度。
白度（Whiteness）：顏色有多白？它接受一個從0%（無白度）到100%（完全白度）的值。
黑度（Blackness）：顏色有多黑？它接受一個從0%（無黑度）到100%（完全黑度）的值。

HSL

與hwb()函式類似的是hsl()函式，它也指定了一個srgb()顏色。HSL 除了使用色相外，還使用飽和度和亮度：

色相（Hue）：同樣，這代表了顏色的基本色調。
飽和度（Saturation）：顏色有多飽和？它接受一個介於0到100%之間的值，其中0表示無顏色（它將顯示為灰色陰影），100%表示完全色彩飽和。
亮度（Lightness）：顏色有多亮？它接受一個介於0到100%之間的值，其中0表示無光（它將顯示為完全黑色），100%表示完全光照（它將顯示為完全白色）。

hsl()顏色值還有一個可選的第四個值，用斜槓（/）與顏色分隔，表示 alpha 透明度。

讓我們更新 RGB 示例以改為使用 HSL 顏色。

html

<div class="wrapper">
  <div class="box one">hsl(188 97% 28%)</div>
  <div class="box two">hsl(321 47% 57%)</div>
  <div class="box three">hsl(174 77% 31%)</div>
</div>

css

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}

.one {
  background-color: hsl(188 97% 28%);
}

.two {
  background-color: hsl(321 47% 57%);
}

.three {
  background-color: hsl(174 77% 31%);
}

就像rgb()一樣，你可以將 alpha 引數傳遞給hsl()以指定不透明度。

html

<div class="wrapper">
  <div class="box one">hsl(188 97% 28% / .3)</div>
  <div class="box two">hsl(321 47% 57% / .7)</div>
  <div class="box three">hsl(174 77% 31% / .9)</div>
</div>

css

.wrapper {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
  padding: 40px 20px;
}

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}

.one {
  background-color: hsl(188 97% 28% / 0.3);
}

.two {
  background-color: hsl(321 47% 57% / 0.7);
}

.three {
  background-color: hsl(174 77% 31% / 0.9);
}

在繼續之前，嘗試修改前兩個示例以使用一些基於色相的顏色值。嘗試在每種情況下改變色相值，看看它如何影響基色，然後也嘗試改變其他引數。

影像

<image>值型別用於影像是有效值的任何地方。這可以是使用url()函式指向的實際影像檔案，也可以是漸變。

在下面的示例中，我們使用影像和漸變作為 CSS background-image屬性的值。

html

<div class="box image"></div>
<div class="box gradient"></div>

css

.box {
  height: 150px;
  width: 300px;
  margin: 20px auto;
  border-radius: 0.5em;
}

.image {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/big-star.png");
}

.gradient {
  background-image: linear-gradient(
    90deg,
    rgb(119 0 255 / 39%),
    rgb(0 212 255 / 25%)
  );
}

注意：<image>還有其他一些可能的值，但這些是較新的，目前瀏覽器支援不佳。如果你想了解它們，請查閱 MDN 上關於<image>資料型別的頁面。

你將在後面的背景和邊框文章中更深入地瞭解影像值。

位置

<position>值型別表示一組 2D 座標，用於定位專案，例如背景影像（透過background-position）。它可以採用關鍵字，如top、left、bottom、right和center，以將專案與 2D 框的特定邊界對齊，以及長度，表示相對於框頂部和左邊緣的偏移量。

一個典型的位置值由兩個值組成 — 第一個設定水平位置，第二個設定垂直位置。如果你只為其中一個軸指定值，另一個將預設為center。

在下面的示例中，我們使用關鍵字將背景影像定位在容器頂部 60 畫素處，並位於容器的右側。

嘗試玩弄這些值，看看你如何移動影像。

html

<div class="box"></div>

css

.box {
  height: 200px;
  width: 400px;
  background-image: url("https://mdn.github.io/shared-assets/images/examples/big-star.png");
  background-repeat: no-repeat;
  background-position: right 60px;
  margin: 20px auto;
  border-radius: 0.5em;
  border: 5px solid rebeccapurple;
}

字串和識別符號

在上面的示例中，我們看到了一些地方使用關鍵字作為值（例如<color>關鍵字如red、black、rebeccapurple和goldenrod）。這些關鍵字更準確地描述為識別符號，一種 CSS 理解的特殊值。因此，它們沒有被引用——它們不被視為字串。

有些地方你在 CSS 中使用字串。例如，指定生成的內容時。在這種情況下，值被引用以表明它是一個字串。在下面的示例中，我們使用未引用的顏色關鍵字以及引用的生成內容字串。

html

<div class="box"></div>

css

.box {
  width: 400px;
  padding: 1em;
  border-radius: 0.5em;
  border: 5px solid rebeccapurple;
  background-color: lightblue;
}

.box::after {
  content: "This is a string. I know because it is quoted in the CSS.";
}

函式

在程式設計中，函式是執行特定任務的程式碼片段。函式很有用，因為你可以編寫一次程式碼，然後多次重用它，而不是一遍又一遍地編寫相同的邏輯。大多數程式語言不僅支援函式，還提供了方便的內建函式來完成常見任務，因此你無需從頭開始編寫它們。

CSS 也有函式，它們的工作方式與其他語言中的函式類似。事實上，我們已經在上面的顏色部分看到過 CSS 函式，例如rgb()和hsl()。

除了應用顏色之外，你還可以使用 CSS 函式來做很多其他事情。例如，轉換函式是移動、旋轉和縮放頁面元素的一種常用方式。你可能會看到translate()用於水平或垂直移動某些內容，rotate()用於旋轉某些內容，或scale()用於放大或縮小某些內容。

數學函式

當你為專案建立樣式時，你可能會從像300px（長度）或200ms（持續時間）這樣的數字開始。如果你想讓這些值根據其他值而改變，你需要做一些數學計算。你可以計算一個值的百分比，或者將一個數字加到另一個數字上，然後用結果更新你的 CSS。

CSS 支援數學函式，它允許我們在 CSS 中執行計算，而不是依賴靜態值或在 JavaScript 中進行數學運算。最常見的數學函式之一是calc()，它允許你進行加法、減法、乘法和除法等運算。

例如，假設我們想將一個元素的寬度設定為其父容器的 20% 加上 100px。我們無法用靜態值指定此寬度——如果父元素使用百分比寬度（或em或rem等相對單位），那麼它將根據其使用的上下文以及使用者裝置或瀏覽器視窗寬度等其他因素而變化。但是，我們可以使用calc()將元素的寬度設定為其父容器的 20% 加上 100px。20% 是基於父容器（.wrapper）的寬度，如果該寬度發生變化，計算結果也會隨之變化。

html

<div class="wrapper">
  <div class="box">My width is calculated.</div>
</div>

css

.wrapper {
  width: 400px;
}
.box {
  padding: 1em;
  border-radius: 0.5em;
  border: 5px solid rebeccapurple;
  background-color: lightblue;
  width: calc(20% + 100px);
}

CSS 中還有許多其他數學函式，例如min()、max()和clamp()；它們分別允許你從一組值中選擇最小值、最大值或中間值。瀏覽我們的CSS 值函式參考頁面，檢視所有可用的 CSS 函式。

瞭解 CSS 函式很有用，這樣你就能在看到它們時識別出來。你應該開始在你的專案中嘗試使用它們——它們將幫助你避免編寫自定義或重複的程式碼來實現你可以用常規 CSS 獲得的結果。

總結

這是對你可能會遇到的最常見的值和單位型別的一次快速瀏覽。你可以在CSS 值和單位模組頁面上檢視所有不同型別——在學習這些課程時，你會遇到許多這些用法。

要記住的關鍵是，每個屬性都有一個定義的允許值型別列表，每個值型別都有一個解釋這些值是什麼的定義。然後你可以在 MDN 上查詢具體細節。例如，瞭解<image>也允許你建立顏色漸變是很有用但可能不那麼顯而易見的知識！

在下一篇文章中，我們將為你提供一些測試，你可以用來檢查你對我們提供的值和單位資訊的理解和記憶程度。

幫助改進 MDN

瞭解如何貢獻

本頁面最後由MDN 貢獻者於2025 年 10 月 10 日修改。

在 GitHub 上檢視此頁面 • 報告此內容存在問題