CSS值与单位解析

颜色值：不只是十六进制那么简单

在 CSS 中定义颜色，我们通常首先想到的是十六进制表示法，但其实 CSS 提供了多种颜色定义方式：

/* 关键字 */
color: red;
 
/* 十六进制 */
color: #ff0000;
 
/* RGB */
color: rgb(255, 0, 0);
 
/* RGBA（带透明度） */
color: rgba(255, 0, 0, 0.5);
 
/* HSL 简介 HSL即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。 */
color: hsl(0, 100%, 50%);
 
/* HSLA（带透明度） */
color: hsla(0, 100%, 50%, 0.5);

实战技巧：

使用 HSL 可以更直观地调整颜色：色相(0-360)、饱和度(0-100%)、亮度(0-100%)
透明效果优先使用 HSLA 而非 opacity，避免影响子元素
使用 CSS 变量统一管理主题色，便于维护

长度单位：绝对与相对的智慧选择

CSS 长度单位分为绝对单位和相对单位两大类：

绝对单位
- px：像素（最常用）
- pt：点（1/72英寸，适合打印）
- cm/mm/in：物理单位（适合固定尺寸输出）
相对单位（响应式设计利器）
- em：相对于当前元素字体大小
- rem：相对于根元素(html)字体大小
- %：相对于父元素
- vw/vh：相对于视口宽度/高度
- vmin/vmax：相对于视口较小/较大尺寸

.container {
    font-size: 16px;
    width: 80%;
}
 
.item {
    font-size: 1.5em;    /* 24px */
    margin: 2rem;        /* 32px（假设html font-size为16px） */
    width: 50vw;         /* 视口宽度的50% */
}

最佳实践：

移动端优先使用 rem 作为主要单位
间距和容器尺寸可以使用 % 或 vw/vh
字体大小推荐使用 rem + vw 的组合（如 font-size: calc(1rem + 0.5vw)）

函数值：CSS 的计算能力

calc() - 混合计算

width: calc(100% - 40px);
font-size: calc(1rem + 1vw);

min()/max()/clamp() - 智能限制

/* 响应式容器：不超过800px，不小于90% */
width: min(800px, 90%);
 
/* 响应式字体：16px-24px之间，首选5vw */
font-size: clamp(16px, 5vw, 24px);

var() - CSS 变量

:root {
--primary-color: #4285f4;
--spacing: 16px;
}
 
.button {
color: var(--primary-color);
padding: var(--spacing);
}

工程化建议：

使用 CSS 变量管理设计系统中的颜色、间距等
clamp() 是实现完美流体排版的利器
合理使用 calc() 可以减少媒体查询的使用

特殊值与单位

角度单位（用于 transform 和渐变）

45deg（45度）
0.25turn（1/4圈）
1.57rad（π/2弧度）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 角度单位演示</title>
<style>
  .box{
    width: 150px;
    height: 150px;
    margin: 40px auto;
    /* 1. transform 旋转：三种写法效果完全一样 */
    /* 45deg   → 传统写法 */
    /* 0.25turn→ 1/4 圈，语义更直观 */
    /* 1.57rad → π/2 弧度，适合与 JS 数学库联动 */
    transform: rotate(0.25turn);          /* 试试 45deg / 1.57rad */
    
    /* 2. 线性渐变：角度也能用 turn / rad */
    background: linear-gradient(0.25turn, #e91e63, #2196f3);
    /* 等价写法：linear-gradient(45deg, #e91e63, #2196f3) */
    
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,.2);
  }
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

时间单位（用于动画）

0.5s（半秒）
200ms（200毫秒）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 时间单位演示</title>
<style>
  .btn{
    padding: 10px 24px;
    font-size: 16px;
    color: #fff;
    background: #4caf50;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    
    /* 过渡写法 1：秒 */
    transition: background 0.5s;
    /* 过渡写法 2：毫秒（完全等价） */
    /* transition: background 500ms; */
  }
  .btn:hover{background: #ff9800;}
 
  /* 关键帧动画：同时用 s 和 ms */
  @keyframes pulse{
    0%  {transform: scale(1); opacity: 1;}
    50% {transform: scale(1.15); opacity: .7;}
    100%{transform: scale(1); opacity: 1;}
  }
  .pulse{
    display: inline-block;
    margin: 30px;
    animation: pulse 1s infinite;      /* 主周期 1 秒 */
    /* 步进函数也能写毫秒 */
    animation-timing-function: steps(200ms, end);
  }
</style>
</head>
<body>
  <button class="btn">悬停我（0.5s 过渡）</button>
  <div class="pulse">脉冲动画（1s 循环）</div>
</body>
</html>

特殊关键字

inherit：继承父元素值
initial：重置为初始值
unset：智能重置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 关键字演示</title>
<style>
  /* 祖父层：给点颜色看看 */
  .grandpa{color: #ff0000; font-size: 32px;}
 
  /* 父层：继续加料 */
  .parent{
    color: #00ff00;
    font-size: 24px;
    border: 2px solid #333;
    padding: 8px;
    margin-bottom: 10px;
  }
 
  /* 三个子项，分别用不同关键字 */
  .son-inherit{
    /* inherit → 把爸爸的颜色和字号全搬过来 */
    color: inherit;
    font-size: inherit;
    border: inherit;   /* 连边框也继承 */
  }
 
  .son-initial{
    /* initial → 直接回退到浏览器默认（color:black; font-size:16px） */
    color: initial;
    font-size: initial;
    border: initial;   /* 默认无边框 */
  }
 
  .son-unset{
    /* unset → 对“可继承”属性=inherit，对“不可继承”属性=initial */
    color: unset;      /* 可继承 → 同 inherit，绿色 */
    font-size: unset;  /* 可继承 → 24px */
    border: unset;     /* 不可继承 → 同 initial，无边框 */
  }
</style>
</head>
<body>
  <div class="grandpa">
    祖父红字 32px
    <div class="parent">
      父级绿字 24px + 边框
      <div class="son-inherit">inherit：完全复制爸爸</div>
      <div class="son-initial">initial：回归出厂设置</div>
      <div class="son-unset">unset：智能判断（绿字/24px/无边框）</div>
    </div>
  </div>
</body>
</html>

打造完美响应式布局

纯CSS部分

:root {
    --max-width: 1200px;
    --gutter: 16px;
    --primary-color: hsl(210, 100%, 50%);
}
 
.container {
    width: min(var(--max-width), 90vw);
    margin: 0 auto;
    padding: var(--gutter);
}
 
.card {
    background: white;
    border-radius: 8px;
    box-shadow: 02px8pxrgba(0,0,0,0.1);
    padding: clamp(12px, 3vw, 24px);
    margin-bottom: var(--gutter);
}
 
.title {
    color: var(--primary-color);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
}

完整案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>CSS 自定义属性 + clamp + min 综合演示</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
  <style>
    /* =========  1. 全局设计令牌（Design Tokens） ========= */
    :root {
      --max-width: 1200px;              /* 页面最大宽度，防止超宽屏阅读困难 */
      --gutter: 16px;                   /* 全局统一间距，保持垂直韵律 */
      --primary-color: hsl(210, 100%, 50%); /* HSL 写法便于后期调饱和/明度 */
    }
 
    /* =========  2. 主容器：宽度“自适应 + 上限” ========= */
    .container {
      /* min() 取“1200px”与“90vw”中较小值 → 大屏不超1200，小屏自动缩 */
      width: min(var(--max-width), 90vw);
      margin: 0 auto;                   /* 水平居中 */
      padding: var(--gutter);           /* 两侧留空，避免贴边 */
    }
 
    /* =========  3. 卡片：白色圆角 + 柔和阴影 ========= */
    .card {
      background: #fff;                 /* 纯白底，保证可读性 */
      border-radius: 8px;               /* 圆角现代感 */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 1. 修正原语法错误（少了空格）2. 低调阴影 */
      /* clamp(最小, 首选, 最大) → 随视口平滑变化，避免固定写死 */
      padding: clamp(12px, 3vw, 24px);
      margin-bottom: var(--gutter);     /* 统一下边距，形成“一臂之隔” */
    }
 
    /* =========  4. 标题：主品牌色 + 响应式字号 ========= */
    .title {
      color: var(--primary-color);      /* 换主题只需改 :root 一处 */
      /* 字号：手机最小1.25rem，大屏最大1.75rem，中间连续过渡 */
      font-size: clamp(1.25rem, 3vw, 1.75rem);
      margin: 0 0 0.5em;                /* 去掉默认多余外边距，保持紧凑 */
    }
 
    /* =========  5. 辅助样式（仅用于演示） ========= */
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      background: #f5f7fa;              /* 浅灰背景，突出白色卡片 */
      line-height: 1.6;
    }
  </style>
</head>
 
<body>
  <!-- 主容器：负责整体宽度与水平居中 -->
  <div class="container">
    <!-- 卡片 1 -->
    <div class="card">
      <h2 class="title">响应式卡片标题 1</h2>
      <p>这张卡片的内边距会随屏幕宽度在 12px~24px 之间平滑变化，标题颜色由 CSS 变量控制，换主题只需改一行。</p>
    </div>
 
    <!-- 卡片 2（复制多张看间距效果） -->
    <div class="card">
      <h2 class="title">响应式卡片标题 2</h2>
      <p>缩小浏览器窗口，观察字号、卡片左右留白、内边距的连续过渡——全部使用 clamp/min 实现，无需媒体查询。</p>
    </div>
  </div>
</body>
</html>

clamp(MIN, VAL, MAX)

浏览器先求出 VAL 的实际值（含单位运算、变量解析、百分比换算）
再把结果夹在 MIN 与 MAX 之间
三个值允许各自独立带单位，浏览器会自动转成同一基准类型（长度、角度、时间等）

/* 合法：浏览器会把 10% 先转成 px（相对于父元素宽度），再参与比较 */
width: clamp(300px, 50%, 800px);
 
/* 合法：角度单位互通 */
transform: rotate(clamp(15deg, 0.1turn, 60deg));
 
/* 合法：时间单位互通 */
animation-duration: clamp(200ms, 1s, 3s);
 
/* 非法：长度与角度混用 → 解析错误 */
height: clamp(100px, 2turn, 500px);