《前端面试题：CSS有哪些单位！》

CSS单位大全：从像素到容器单位的前端度量指南

精通CSS单位是构建响应式、灵活布局的关键技能，也是面试中的必考知识点

一、CSS单位的重要性与分类

在网页设计中，CSS单位是控制元素尺寸、间距和定位的基础。不同的单位提供了不同的计算方式和适应性，理解它们的特性对于创建响应式设计至关重要。CSS单位可分为四大类：

1. 绝对单位：固定物理尺寸（px, pt, in, cm, mm, pc）
2. 相对单位：基于上下文计算（em, rem, %, ex, ch）
3. 视口单位：相对于视口尺寸（vw, vh, vmin, vmax）
4. 函数单位：动态计算值（calc(), min(), max(), clamp()）

二、绝对单位详解

1. 像素（px）

/* 最常用的绝对单位 */
.element {
  width: 300px; 
  font-size: 16px;
  border: 1px solid #ccc;
}

特点：

• 1px = 1/96英寸（在96dpi屏幕上）
• 固定尺寸，不受父元素或视口影响
• 高分辨率屏幕下可能小于物理像素

2. 物理单位（pt, pc, in, cm, mm）

/* 主要用于打印样式 */
@media print {
  .document {
    width: 8.5in;      /* 英寸 */
    margin: 1cm;       /* 厘米 */
    font-size: 12pt;   /* 点 */
    line-height: 1pc;  /* 派卡 (1pc = 12pt) */
  }
}

换算关系：

• 1in = 2.54cm = 25.4mm = 72pt = 6pc
• 96px = 1in (在标准密度屏幕上)

三、相对单位深度解析

1. em 单位

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* 24px (16 * 1.5) */
  padding: 2em;     /* 48px (24 * 2) */
}

/* 嵌套问题 */
.grandchild {
  font-size: 0.8em; /* 19.2px (24 * 0.8) */
}

特点：

• 相对于当前元素的字体大小
• 嵌套使用时会产生复合效果
• 适用于与字体大小相关的间距

2. rem 单位（Root em）

html {
  font-size: 16px; /* 基准大小 */
}

.component {
  font-size: 1.25rem; /* 20px (16 * 1.25) */
  padding: 1rem;      /* 16px */
  margin: 2rem;       /* 32px */
}

优势：

• 相对于根元素(html)的字体大小
• 避免嵌套计算问题
• 实现全局尺寸调整

3. 百分比（%）

.container {
  width: 800px;
}

.child {
  width: 50%;   /* 400px */
  height: 100%; /* 继承父容器高度 */
  padding: 5%;  /* 父容器宽度的5% */
}

注意：百分比参照对象随属性变化：

• width/height: 父元素内容区尺寸
• padding/margin: 父元素宽度
• font-size: 父元素的font-size值
• line-height: 当前元素的font-size值

4. 字体相关单位（ex, ch）

/* 基于当前字体的度量 */
.heading::first-letter {
  font-size: 3ex; /* 当前字体x高度的3倍 */
}

.code-block {
  width: 60ch; /* 60个"0"字符的宽度 */
  max-width: 100%; /* 响应式限制 */
}

四、视口单位（Viewport Units）

1. 基本视口单位

.full-width {
  width: 100vw; /* 视口宽度的100% */
}

.full-height {
  height: 100vh; /* 视口高度的100% */
}

.hero-section {
  min-height: 100vh; /* 最小高度为视口高度 */
}

2. 动态字体大小

h1 {
  /* 基础大小 + 视口比例 */
  font-size: calc(1.5rem + 2vw);
}

/* 使用clamp()确保边界 */
.subtitle {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}

3. vmin 和 vmax

/* 正方形元素 */
.square {
  width: 50vmin; /* 视口较小尺寸的50% */
  height: 50vmin;
}

/* 全屏背景元素 */
.background {
  width: 100vmax; /* 视口较大尺寸的100% */
  height: 100vmax;
}

五、CSS函数单位

1. calc() - 动态计算

/* 响应式布局 */
.sidebar {
  width: 300px;
}

.main-content {
  width: calc(100% - 300px - 2rem);
}

/* 复杂计算 */
.grid-item {
  width: calc((100% - 3 * 20px) / 4); /* 4列网格 */
}

2. min() 和 max() - 边界限制

.container {
  width: min(1200px, 90vw); /* 不超过1200px或90vw */
  padding: max(1rem, 3vw);   /* 至少1rem或3vw */
}

/* 响应式字体 */
h2 {
  font-size: max(1.2rem, 2.5vw);
}

3. clamp() - 三值范围限制

/* 理想范围：1.5rem到2.5rem之间，中间值响应式 */
.title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

/* 响应式内边距 */
.card {
  padding: clamp(1rem, 3%, 2rem);
}

六、CSS容器查询单位（新特性）

1. 容器相对单位

.component {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .title {
    font-size: max(1.5rem, 5cqw); /* 容器宽度的5% */
  }
  
  .content {
    padding: 2cqi; /* 容器内联尺寸的2% */
  }
}

容器单位类型：

• cqw: 容器宽度的1%
• cqh: 容器高度的1%
• cqi: 容器内联尺寸的1%
• cqb: 容器块尺寸的1%
• cqmin: 容器较小尺寸的1%
• cqmax: 容器较大尺寸的1%

七、特殊场景单位

1. 角度单位

/* 旋转动画 */
@keyframes rotate {
  to {
    transform: rotate(360deg); /* 度 */
    /* 其他单位: rad(弧度), grad(百分度), turn(圈) */
  }
}

2. 时间单位

.transition {
  transition: all 300ms ease; /* 毫秒 */
  animation-duration: 2s;    /* 秒 */
}

3. 分辨率单位

/* 高分辨率屏幕适配 */
@media (min-resolution: 2dppx) {
  .high-res-image {
    background-image: url("image@2x.png");
  }
}

八、单位使用最佳实践

1. 响应式设计单位策略

:root {
  --spacing-unit: 0.5rem;
  --header-height: clamp(3rem, 8vh, 5rem);
}

.container {
  padding: calc(var(--spacing-unit) * 2);
}

.card {
  margin-block: max(1vh, 0.5rem);
  font-size: clamp(1rem, 1rem + 0.3vw, 1.2rem);
}

2. 避免常见陷阱

/* 移动端100vh问题 */
.modal {
  height: 100vh; /* 可能包含地址栏 */
  height: 100dvh; /* 新标准：动态视口高度 */
}

/* 嵌套em问题 */
.menu {
  font-size: 1.2em;
}

/* 改为 */
.menu {
  font-size: 1.2rem;
}

3. 单位组合技巧

/* 完美居中 */
.center-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 800px);
}

/* 响应式网格 */
.grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit, 
    minmax(min(250px, 100%), 1fr)
  );
  gap: clamp(1rem, 3vw, 2rem);
}

九、经典面试题解析

1. rem和em的区别是什么？

答案：

• rem：基于根元素(html)的字体大小
• em：基于当前元素的字体大小
• 关键区别：继承计算方式不同

2. 如何解决移动端100vh包含地址栏的问题？

解决方案：

/* 现代解决方案 */
.container {
  height: 100dvh; /* 动态视口高度 */
}

/* 兼容方案 */
.container {
  height: 100vh;
  height: -webkit-fill-available;
}

3. 实现一个自适应的正方形元素

.square {
  width: 20vmin;
  aspect-ratio: 1/1; /* 宽高比属性 */
  
  /* 传统方法 */
  width: 20%;
  padding-bottom: 20%; /* 基于父元素宽度 */
}

4. 解释以下代码的输出：

<div class="outer" style="font-size: 20px; width: 400px;">
  <div class="inner" style="width: 50%; padding: 1em;"></div>
</div>

答案：

• 宽度：400px × 50% = 200px
• 内边距：1em = 当前字体大小20px
• 总宽度：200px + 20px × 2 = 240px

5. 如何创建响应式字体？

/* 推荐方案 */
body {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}

十、未来趋势与总结

1. 新兴单位

• lh/rlh：行高单位
• ic：根据"水"（CJK字符）的宽度
• cap：大写字母高度
• svw/svh：小视口单位（忽略UI控件）

2. 单位选择策略

1. 布局尺寸：%, fr, vw/vh
2. 字体大小：rem + clamp()
3. 间距：rem + 自定义属性
4. 响应式：min()/max()/clamp()
5. 容器相关：cq*单位

3. 总结要点

• 理解每种单位的计算基准
• 优先使用相对单位实现响应式
• 组合使用函数单位创建灵活布局
• 关注容器查询等新特性发展
• 测试不同设备下的实际表现

CSS单位的选择是艺术与科学的结合。掌握它们的内在逻辑，你将能够创建出既精确又灵活的现代网页布局。记住：没有"最佳"单位，只有最适合特定场景的选择。