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 上查看此页面 • 报告此内容存在问题