5 / 20

值和单位 | 自在学

值和单位

在CSS的体系中，“值”和“单位”是描述网页样式的基本工具。无论是设置字体大小、控制间距、指定颜色，还是实现复杂布局，所有的样式本质上都依赖于合理的值和对应的单位。如果没有这些概念，我们就无法清晰而精确地告诉浏览器元素应该是什么样子。例如，一个按钮距离页面边缘多远，标题需要多大字号，或者图片应该多宽，这些都需要值与单位的共同作用。话不多说，我们马上开始！

实验室

在正式进入理论学习之前，我们先在实验室中随便玩玩，通过实践来加深对值和单位的理解。

关键字、字符串与其他文本类型的值

在CSS中，很多属性通过文本来指定其取值，不同类型的文本值适用于不同的场景，主要包括：关键字、字符串、标识符和URL。理解这些文本值的具体用法，有助于我们灵活地控制页面表现。

关键字

关键字是CSS定义的一组具有特殊意义的预设文本。每个关键字都对应着一种明确的行为，能让我们快捷、简洁地设定特定效果。比如，当我们要去除链接的下划线时，可以直接使用none；如果想要让下划线始终可见，就用underline。与普通文本不同，这些关键字并非任意字符串，而是浏览器已经内置识别的命令。使用关键字不仅让CSS代码更语义化，还有助于避免不同浏览器之间的解析歧义。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      text-decoration: none;
    }
 
    .underline {
      text-decoration: underline;
    }
 
    .italic {
      font-style: italic;
    }
  </style

需要注意的是，关键字的作用范围是有限的。同一个关键字在不同的属性中可能有着完全不同的含义。比如normal这个关键字，在letter-spacing属性中表示正常的字符间距，而在font-style属性中则表示正常的字体样式。这种设计让CSS更加灵活，但也要求我们在使用时要注意上下文。

全局关键字

在CSS里有五个“万能钥匙”一样的全局关键字，叫做：inherit、initial、unset、revert 和 revert-layer。它们几乎能塞进任何CSS属性里，用来灵活地控制样式，解决各种棘手的小问题。

inherit

本来有些CSS属性会自动继承（比如颜色），有些不会（比如背景），但如果你非要某个属性也继承父元素的值，就可以加上 inherit。

举个很常见的例子：我们做导航栏，导航栏背景是蓝色，文字是白色。但里面的链接（a标签）可能还是蓝色的，这时我们只要写一句 color: inherit;，就能让链接乖乖地继承父容器的白色字体，看起来就和想象中的一样了。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      background-color: blue;
      color: white;
      padding: 10px;
    }
 
    .box a {
      color: inherit;
      text-decoration

initial

initial关键字的作用是将属性重置为它的初始值。每个CSS属性都有一个默认的初始值，使用initial就是告诉浏览器"把这个属性恢复到最初的状态"。

比如font-weight属性的初始值是normal，所以font-weight: initial和font-weight: normal的效果是一样的。但是有些属性的初始值可能不是那么明显，比如color属性的初始值取决于用户代理（浏览器）的设置。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .bold {
      font-weight: bold;
    }
 
    .reset {
      font-weight: bold;
      font-weight: initial;
    }
  </style>
</head>

unset

unset关键字是一个智能的重置工具。如果属性是继承的，它就表现得像inherit；如果属性不是继承的，它就表现得像initial。

revert 和 revert-layer

revert撤销当前样式源的所有更改，回到用户代理样式。revert-layer用于CSS层叠层，撤销当前层中的样式更改。

这些全局关键字为我们提供了精确控制样式继承和重置的能力。在实际开发中，它们特别适用于组件库的开发，让我们可以创建既灵活又可预测的样式系统。

字符串

我们在写CSS的时候，经常需要直接写一些具体的文字内容，比如按钮上的“登录”两个字，或者页面上的提示信息“欢迎来到我们的网站”。这些具体的文字在CSS里就被称为字符串。

字符串必须用引号包裹起来，你可以用单引号也可以用双引号，但是一定要前后一致。就像我们在中文里写引文一样，开了什么引号就得用什么引号来结束。

如果字符串内容本身就包含引号怎么办？比如我们想显示"小明说：'今天天气真好'"这样的内容，这时候就需要用到转义字符——反斜杠（\）。通过反斜杠，我们可以告诉浏览器："这个引号不是字符串的边界，而是内容的一部分"。

标识符

在CSS里，我们经常需要给各种东西起名字，比如网页上的不同区域、动画效果，或者自定义的样式组。这些名字就被称为标识符。

标识符有一个很重要的特点：它必须是一个完整的单词，不能有空格。比如我们不能写“main content”，而是要写main-content或者mainContent。另外，标识符是大小写敏感的，这意味着Header和header是两个完全不同的名字。

标识符的命名规则其实挺宽松的，你可以用英文字母、数字、连字符（-）或者下划线（_），但是不能用数字作为开头。而且这些名字不能和CSS的保留关键字重复。

|
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
  <style>
    /* 页面头部区域 */
    .page-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color:

URL值

URL值在CSS中用来引用外部资源，比如图片、字体文件、其他样式表等。URL值的基本语法是url(资源地址)，其中资源地址可以是绝对URL或相对URL。

绝对URL包含了完整的协议和域名信息，比如https://example.com/images/logo.png。相对URL则是相对于当前文档或样式表的位置，比如images/logo.png。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .bg {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect width="50" height="50" fill="blue"/></svg>');
      width: 100px;
      height: 100px;
    }
  </style>
</head

需要注意的是，CSS中的相对URL是相对于样式表文件的位置，而不是相对于HTML文档的位置。这意味着如果我们在外部样式表中使用相对URL，浏览器会根据样式表的位置来解析这些URL。

在使用URL值时，要特别注意路径的正确性。错误的URL会导致资源无法加载，影响页面的显示效果。建议在开发过程中使用浏览器开发者工具检查网络请求，确保所有资源都能正确加载。

图像和数值

在CSS中，图像和数值是实现丰富页面视觉和精准布局的重要基石。图像值，让我们可以灵活地调用各种图片和视觉资源；数值，则为页面元素的大小、比例和位置提供了精细调控的可能。

图像值

说到CSS里的图像值，我们绝不仅仅局限于常规的图片文件。它还包括渐变、图案乃至多重图像叠加等多种形式。最常见、最基础的图像值其实是用 url() 表示的图片引用，不过，现代CSS远不止于此，还能表达出很多更高级的视觉效果。

基础图像类型

基础用法通常是通过 url() 函数，直接引用一张外部图片。这些图片可以用于背景、边框、列表项等各种场景，非常灵活和通用。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .bg {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect width="50" height="50" fill="blue"/></svg>');
        width: 100px;
        height: 100px;
      }
    </style>
  </

渐变图像

渐变是CSS中一种特殊的图像类型，它不需要外部文件，完全由CSS代码生成。渐变可以是线性的、径向的或圆锥形的，为我们提供了丰富的视觉效果选择。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .gradient {
        background: linear-gradient(45deg, red, blue);
        width: 150px;
        height: 100px;
        margin: 1

数值类型

在CSS中，“数值”这件事就像我们日常生活中的数字：量身高、算面积、调整比例都离不开它。CSS用数值来表达元素的大小（比如宽和高）、位置、缩放、透明度……可以说只要和“多少”有关的地方，都少不了数值的参与。

整数

所谓“整数”，就是没有小数点的数字——可以是0，也可以是正数或负数。比如1、-5、0都属于整数类型。生活中的“人数、楼层、层级”这些离散的数，一般都用整数。在CSS里也是这样：比如z-index控制谁在上面谁在下面，column-count定义要分多少列，计数用途一般都用整数。整数不会带小数点，是最基础、最简单的数值类型。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .layer-1 { 
        position: relative; 
        z-index: 1; 
        background: red;
        width: 100px; 
        height: 50px; 
      }

数字

数字类型包括整数和小数，它们可以表示更精确的数值。在CSS中，数字通常用于表示比例、透明度、缩放因子等需要精确控制的值。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box1 { 
        opacity: 1; 
        background: red;
        width: 100px; 
        height: 50px; 
        margin: 5px;

百分比

百分比是一种相对数值，它表示相对于某个基准值的比例。在CSS中，百分比的应用非常广泛，从尺寸设置到颜色透明度，都能看到它们的身影。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container { width: 100%; background: #f0f0f0; padding: 10px; }
      .inner { width: 50%; background: blue; height

分数单位

分数单位（fr）是CSS Grid布局中引入的一种特殊单位，它表示网格容器中剩余空间的一部分。分数单位让我们能够创建灵活的网格布局，而不需要复杂的计算。

我们后面会详细介绍CSS Grid布局，这里即使现在不会也没关系，只要稍做了解即可。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 10px;
      }
      .item1 { background: red; padding

数值类型是CSS中最为基础的概念之一。整数用于计数和层级，数字用于精确的比例控制，百分比用于相对尺寸，而分数单位则专门为网格布局设计。理解这些数值类型的特点和应用场景，将帮助我们更好地掌握CSS的布局和样式控制能力。

距离单位

在 CSS 世界里，距离单位就像是建筑师手里的尺子，是精准控制各种元素尺寸、间距和布局的关键工具。你可以把它们想象成我们生活中的米尺、卷尺，没有这些单位，网页设计完全没法精细动手。比如，你想让按钮大一点？页面左右边距宽松些？或者让导航栏“高高在上”？没距离单位，这些都不可能实现。

距离单位

CSS 提供了丰富的距离单位，不同单位适合不同场景。有的很绝对——就像用尺子直接量出来，在哪个设备上几乎都一样大；有的更灵活，能根据屏幕大小、父元素等动态变化。合理选择和组合这些单位，可以让你的页面既美观又适应各种设备。

绝对长度单位

绝对长度单位，顾名思义，就是“死死的”那种单位，不随着页面环境变化。它们参照的是物理世界的长度标准，理论上不同设备上显示出来大小都差不多。这一类包括：

像素（px）：网页设计师的最爱
英寸（in）、厘米（cm）、毫米（mm）：更常见于打印相关场景
点（pt） 和 派卡（pc）：印刷行业用得比较多

像素单位（px）

提到 CSS 单位，几乎所有人第一反应都是“px”。像素是界面设计中最常用、最灵活的单位，几乎任何布局和控件都离不开它。在 CSS 规范里，1px 被正式定义为 1/96 英寸，也就是说 96px=1 英寸。虽然听起来有点学术范儿，但实际上我们一般不用死记这个比例。

在网页开发时，“像素”更像是浏览器的“显示格子”。无论你做按钮、卡片、弹窗、还是图片，直接用 px 就能明确控制每个元素到底有多大，可以说是精确到“分毫不差”。而且绝大多数屏幕和浏览器对 px 的支持也最完美，所以新手、老手都爱用这个单位。

需要注意的是，由于屏幕分辨率和设备像素比的不同，1px 在不同显示器上肉眼看起来可能不完全一致，但对网页布局和开发来说，这通常不是大问题。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box { 
        width: 200px; 
        height: 100px; 
        background: blue; 
        margin: 10px; 
      }
    </style>

其他绝对单位

除了像素，CSS还支持其他绝对长度单位，如英寸（in）、厘米（cm）、毫米（mm）、点（pt）、派卡（pc）等。这些单位主要用于打印样式，在屏幕显示中较少使用。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box1 { 
        width: 2cm; 
        height: 1cm; 
        background: red; 
        margin: 5px; 
      }
      .box2 { 
        width

相对长度单位

相对长度单位，其实就是会“看情况变化”的单位。跟前面介绍的绝对长度单位（比如 cm、px 一类每个人都一样）不同，这类单位会根据元素的字体大小、父元素大小或者其他属性灵活变化。正因为它们能“见风使舵”，所以特别适合做自适应和响应式的页面布局，比如让网页在不同设备、不同字号下看起来都合理；也能更好地配合无障碍设计，让页面内容随用户的需求自动调节。

em 单位

em是CSS里最经典的相对单位之一。它的意思就是“当前元素的字体大小”，1em 就等于这个元素自己的 font-size。例如，假设你有个盒子的字体大小写成 font-size: 16px;，那么在这个盒子里写 width: 2em;，那宽度就是 2 × 16px = 32px。

这种做法最大好处是，不管用户怎么调整字号、屏幕怎么变，em相关的宽高、间距、内外边距都会自适应字体大小，界面就会显得很和谐。而且，如果父元素的字体大小变了，em会根据级级继承，继续连锁变化，非常适合做随文本缩放的页面元素。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box { 
        font-size: 20px; 
        width: 10em; 
        height: 5em; 
        background: red; 
        margin: 1em;

rem 单位

rem单位是相对于根元素（html元素）字体大小的单位。与em不同，rem不会受到父元素字体大小的影响，这使得它非常适合创建一致的布局。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      html { font-size: 16px; }
      .box { width: 10rem; height: 5rem; background: blue; margin: 1rem; }

视口相对单位

视口相对单位是相对于浏览器视口大小的单位，包括vw（视口宽度）、vh（视口高度）、vmin（视口最小尺寸）、vmax（视口最大尺寸）等。这些单位非常适合创建全屏布局和响应式设计。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box { width: 50vw; height: 50vh; background: red; margin: 10px; }
    </style>
  </head>

距离单位的选择对CSS布局至关重要。绝对单位适合精确控制，相对单位适合响应式设计。在实际项目中，我们通常会混合使用多种单位：用rem控制整体布局，用em控制组件内部间距，用vw/vh创建全屏效果，用px处理边框和阴影等细节。

函数值

CSS里有很多函数，它们能帮我们做计算、比较、限制范围，甚至还能从HTML属性里提取值。这些函数让CSS变得更强大、更灵活。我们这里先介绍几个最常用的：calc()、min()、max()、clamp() 和 attr()。

calc()

calc() 可以看作是CSS里的超级“计算器”，让我们直接在样式表里实现各种数学运算。比如，有时候我们既想用百分比让盒子自适应，又要结合固定的间距，就必须做些加减乘除，这时 calc() 就派上用场了。

举个常见例子：假设你想让某个元素的宽度等于父元素宽度的90%，但还要再减去2em（比如左右各有间距），就可以这样写： width: calc(90% - 2em); 这个表达式的意思就是“先算90%的父容器宽，再减去2em的距离”。

那calc()具体怎么用呢？其实很像小学做算术题！支持加（+）、减（-）、乘（*）、除（/），甚至还能用括号组合运算。要注意几点细节：

加号和减号两边一定要留空格，不然浏览器识别不了（比如 calc(100% - 20px)），而星号（*）和斜杠（/）前后可以不用空格；
操作的单位要有逻辑，比如可以把px和em、%混合计算，但不能拿纯数字和长度直接相加（像10 + 2em就不对）；
它甚至还可以嵌套使用，比如 calc(50% + calc(2em * 3))。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 500px;
        background: #f0f0f0;
        padding: 20px;
      }
      
      .box {
        width: calc(100

min() 最小值函数

min() 函数会从多个值里选最小的那个。听起来有点绕，其实它相当于设置了一个“最大值”。比如你想让图片宽度不超过200px，但小屏幕上可以占满25%的视口宽度，就可以写成 width: min(25vw, 200px);。

这在响应式设计里特别有用，能确保元素不会超出预期大小。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 100%;
        padding: 20px;
        background: #f0f0f0;
      }
      
      .box {
        width: min(300

max() 最大值函数

max() 和 min() 相反，它会选最大的那个值。这样相当于设置了一个“最小值”。比如你想让头部高度至少100px，但高屏幕时可以更高，就可以写成 height: max(100px, 15vh);。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .header {
        height: max(80px, 10vh);
        background: blue;
        color: white;
        display: flex;
        align-items:

clamp() 限制范围函数

clamp() 是最实用的一个，它能同时设置最小值、理想值和最大值。格式是 clamp(最小值, 理想值, 最大值)。比如你想让文字大小响应式变化，但不会太小也不会太大，就可以写成 font-size: clamp(1rem, 2vw, 2rem);。

这样文字会随着视口变化，但始终在1rem到2rem之间。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .responsive-text {
        font-size: clamp(16px, 4vw, 32px);
        padding: 20px;
        background: #f0f0f0;
      }
    </

attr() 属性值函数

attr() 函数可以从HTML元素的属性里提取值。最常见的是用在 content 属性里，比如给链接前面加上它的href地址。不过要注意，attr() 提取的值通常只是文本，不会解析成其他类型（比如URL不会变成图片）。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .link::before {
        content: "链接：";
      }
      
      .link::after {
        content: " (" attr(href) ")";
        color: gray;
        font-size

使用这些函数时要注意兼容性。calc() 现代浏览器基本都支持，min()、max()、clamp() 也支持得很好，但 attr() 的功能相对有限，主要用于生成内容。

颜色

颜色在网页设计中的地位，相当于绘画中的颜料——没有色彩，页面就会显得苍白、生硬。色彩不仅让页面变得美观，还能传递情感、强化层次，甚至引导用户的注意力。因此，懂得如何在CSS中设置和运用颜色，是前端开发非常基础而实用的技能。

在CSS里，为元素设置颜色有很多方法——从写名字、用数字到定义透明度，每种方法各有优缺点，我们可以根据需要灵活选择。

命名颜色

最直接、最简单的方式，就是直接写“颜色的名字”！比方说，red（红色）、blue（蓝色）、green（绿色），这些都是CSS自带的颜色名称。不仅容易记，也能让代码看起来一目了然。其实CSS一共内置了148种标准颜色名。除了大家熟悉的16种基本颜色（比如black黑色、white白色、red红色等），还有许多更细致的扩展，比如lightgreen（浅绿色）、firebrick（砖红色）、royalblue（皇家蓝）等等。下面就是最常见的写法：

|
color: red;
background: lightgreen;

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .red { color: red; }
      .blue { color: blue; }
      .green { color: green; }
      .purple { color: purple; }
      .orange {

特殊颜色关键字

CSS有两个特殊的颜色关键字：transparent 和 currentcolor。

transparent 表示完全透明，相当于 rgba(0,0,0,0)。它不常用于文字颜色，但经常用于背景色和边框，让元素有空间但不显示。

currentcolor 表示“当前元素的文字颜色”。比如你设置了 color: red;，然后用 border-color: currentcolor;，边框就会是红色，和文字颜色一致。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        color: blue;
        border: 2px solid currentcolor;
        padding: 10px;
        margin: 10px;
      }

RGB 和 RGBa 颜色

RGB是红色（Red）、绿色（Green）、蓝色（Blue）的缩写。电脑屏幕就是通过这三种颜色的不同组合来显示各种颜色的。

CSS可以用 rgb() 函数来指定RGB颜色。格式是 rgb(红, 绿, 蓝)，每个值可以是0-255的整数，也可以是0%-100%的百分比。比如 rgb(255, 0, 0) 或 rgb(100%, 0%, 0%) 都是红色。

RGBa就是在RGB基础上加了一个透明度（alpha）参数。格式是 rgba(红, 绿, 蓝, 透明度) 或 rgb(红绿蓝 / 透明度)。透明度可以是0-1的小数，也可以是0%-100%的百分比。比如 rgba(255, 0, 0, 0.5) 就是半透明的红色。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .rgb-red { background: rgb(255, 0, 0); color: white; padding: 10px; }
      .rgb-green { background: rgb(0

十六进制颜色

十六进制颜色就是用 # 开头的颜色代码，比如 #FF0000 是红色，#000000 是黑色，#FFFFFF 是白色。这是网页开发中最常用的颜色表示方法之一。

格式是 #RRGGBB，RR代表红色，GG代表绿色，BB代表蓝色，每个都是00-FF的十六进制数（相当于0-255）。如果你熟悉十六进制，可以直接用。

如果每对数字相同，可以简写成三位，比如 #FF0000 可以写成 #F00，#FFFFFF 可以写成 #FFF。

十六进制也可以带透明度，格式是 #RRGGBBAA 或简写成 #RGBA。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .hex1 { background: #FF0000; color: white; padding: 10px; }
      .hex2 { background: #00FF00; padding: 10px; }
      .hex3

HSL 和 HSLa 颜色

HSL是色相（Hue）、饱和度（Saturation）、亮度（Lightness）的缩写。相比RGB，HSL更直观：色相决定颜色（0-360度，0是红色，120是绿色，240是蓝色），饱和度决定颜色的鲜艳程度（0%-100%），亮度决定颜色的明暗（0%是黑色，100%是白色）。

格式是 hsl(色相, 饱和度%, 亮度%)。比如 hsl(0, 100%, 50%) 是红色，hsl(120, 100%, 50%) 是绿色。

HSLa就是HSL加上透明度，格式是 hsla(色相, 饱和度%, 亮度%, 透明度) 或 hsl(色相饱和度% 亮度% / 透明度)。

HSL特别适合需要调整颜色的明暗或饱和度时使用，比RGB更直观。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .hsl-red { background: hsl(0, 100%, 50%); color: white; padding: 10px; }
      .hsl-green { background: hsl

color 属性

color 属性用来设置元素的文字颜色。它可以接受任何有效的颜色值，包括命名颜色、RGB、十六进制、HSL等。

color 属性是继承的，这意味着如果你给父元素设置了颜色，子元素会自动继承这个颜色（除非子元素明确设置了其他颜色）。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .parent {
        color: blue;
        padding: 10px;
        border: 2px solid #ccc;
      }
      
      .child {
        color: red

不同的颜色表示方法各有优势：命名颜色最简单但选择有限；RGB和十六进制最精确；HSL最适合调整颜色的明暗和饱和度。在实际项目中，可以根据需要选择合适的表示方法。

其他值类型

除了前面介绍的值类型，CSS还支持角度、时间、频率、比例、位置等特殊值类型。这些值类型在特定场景下非常有用。

角度

角度值用于表示旋转角度，比如在CSS Transform中旋转元素。CSS支持四种角度单位：度（deg）、梯度（grad）、弧度（rad）和圈（turn）。

deg：度，一个圆有360度
grad：梯度，一个圆有400梯度
rad：弧度，一个圆有2π（约6.28）弧度
turn：圈，一个圆就是1圈

需要注意的是：角度值必须带上单位，即使值是0也要写成 0deg。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: blue;
        margin: 20px;
        display: inline-block;

时间和频率

时间值用于表示持续时间或延迟，比如动画持续时间、过渡延迟等。时间单位有两种：秒（s）和毫秒（ms）。1秒等于1000毫秒，所以 2.4s 和 2400ms 是一样的。

频率值用于表示声音频率，单位是赫兹（Hz）或千赫兹（kHz）。频率值在CSS中主要用于听觉样式，但浏览器支持很有限。

与角度相同，时间值也必须带上单位，即使值是0也要写成 0s。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: blue;
        margin: 20px;
        transition: transform 1s;

比例

比例值用来表示宽高比，格式是两个数字用斜杠分隔，比如 16/9 表示16:9的宽高比。第一个数字表示宽度（内联尺寸），第二个数字表示高度（块级尺寸）。比例值主要用于响应式图片和视频等场景，确保元素保持特定的宽高比。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 400px;
        background: #f0f0f0;
        padding: 10px;
      }
      
      .box {
        background: blue;

位置值

位置值用于指定背景图片或其他元素的位置。它可以用关键字（如 left、center、right、top、bottom）、百分比或长度值来表示。如果只指定一个值，另一个值会默认为 center。比如 left 等同于 left center，25% 等同于 25% center。

位置值的语法比较复杂，但基本规则是：第一个值通常是水平位置，第二个值是垂直位置。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 300px;
        height: 200px;
        border: 2px solid #ccc;
        background-color: #f0f0f0;
        background-image:

需要注意的是，位置的的计算是从元素的左上角开始计算的，而不是从元素的中心开始计算的。

自定义属性

CSS变量（也叫自定义属性）让CSS变得更灵活和强大。就像其他编程语言里的变量一样，你可以定义一个值，然后在多个地方重复使用。这样当你需要修改这个值时，只需要改一处，所有使用这个变量的地方都会自动更新。

自定义属性必须以两个连字符（--）开头，然后通过 var() 函数来使用。比如 --main-color: blue; 定义了一个变量，然后 color: var(--main-color); 来使用它。

基本用法

定义自定义属性时，通常放在 :root 选择器里（表示根元素，也就是 <html> 元素），这样整个页面都能访问到。当然，你也可以在特定元素上定义，让它只在该元素及其子元素中生效。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --primary-color: #007bff;
        --secondary-color: #6c757d;
        --spacing: 20px;
      }
      
      .button {
        background-color: var(--primary-color

作用域

自定义属性有作用域的概念。如果一个变量在某个元素上定义，它只在这个元素及其子元素中有效。如果子元素定义了同名变量，就会覆盖父元素的变量。

这个特性特别有用，比如你可以在不同区域使用不同的主题色，而不需要为每个区域写不同的样式规则。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --theme-color: blue;
      }
      
      .sidebar {
        --theme-color: green;
        background: var(--theme-color);
        color: white;

结合 calc() 使用

自定义属性可以和其他CSS函数结合使用，比如 calc()。这样可以创建更复杂的计算，同时保持代码的可维护性。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --base-size: 16px;
        --multiplier: 2;
      }
      
      .text-small {
        font-size: var(--base-size);
      }
      
      .text-medium

回退值

使用 var() 函数时，可以提供一个回退值。如果变量没有定义或无效，就会使用回退值。格式是 var(--变量名, 回退值)。

回退值可以是普通值，也可以是另一个 var() 表达式，这样可以创建链式的回退机制。

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --primary-color: blue;
      }
      
      .box1 {
        background: var(--primary-color, red);
        color: white;
        padding:

自定义属性是CSS中非常强大的功能，它让CSS代码更容易维护和复用。通过合理使用变量，你可以创建一致的设计系统，快速切换主题，还能让代码更加清晰易懂。

小结

通过本部分的学习，我们应该对CSS中的值和单位有了全面的了解。从简单的关键字和命名颜色，到复杂的计算函数和自定义属性，这些工具让我们能够精确而灵活地控制网页的每一个细节。

实战练习

练习1：关键字和全局关键字

请写出CSS中5个全局关键字，并解释inherit关键字的作用。

答案：

CSS中的5个全局关键字是：

inherit - 让元素继承父元素的值
initial - 重置为属性的初始值
unset - 如果属性可继承则表现为inherit，否则表现为initial
revert - 撤销当前样式源的所有更改，回到用户代理样式
revert-layer - 撤销当前层中的样式更改

inherit关键字的作用是让某个属性值从父元素继承过来，而不是使用默认值。

练习2：长度单位转换

以下代码中，.box的宽度是多少像素？（假设根元素字体大小为16px）

|
.box {
  font-size: 20px;
  width: 3em;
}

答案：

60px

解析：em单位是相对于当前元素的字体大小，当前元素font-size为20px，所以3em = 3 × 20px = 60px。

练习3：calc()函数计算

计算以下表达式的结果：calc(100px + 2em)（假设当前字体大小为16px）

答案：

132px

解析：100px + 2em = 100px + 2 × 16px = 100px + 32px = 132px

练习4：颜色表示法

写出红色在以下颜色表示法中的写法：

命名颜色
RGB
十六进制
HSL

答案：

命名颜色：red
RGB：rgb(255, 0, 0) 或 rgb(255 0 0)
十六进制：#FF0000 或 #F00
HSL：hsl(0, 100%, 50%) 或 hsl(0 100% 50%)

练习5：min()和max()函数

以下CSS会让元素宽度是多少？（假设容器宽度为800px）

|
.element {
  width: min(300px, 50%);
}

答案：

300px

解析：min(300px, 50%)会选择两个值中较小的一个。50% = 400px（800px × 50%），而300px比400px小，所以选择300px。

练习6：自定义属性

以下代码中，.child的背景色是什么？

|
:root {
  --main-color: blue;
}
 
.parent {
  --main-color: red;
}
 
.child {
  background-color: var(--main-color);
}

答案：

红色（red）

解析：.child会继承父元素.parent中定义的--main-color: red，而不是根元素中的蓝色。