CSS中的常见单位（px、em、rem、%、vw/vh等）详解

一、知识描述
CSS单位是定义元素尺寸、间距、字体大小等属性的基础。不同的单位具有不同的计算特性和适用场景，正确理解和使用这些单位对实现精确布局和响应式设计至关重要。本知识点将系统讲解px、em、rem、%、vw/vh等常见单位的核心差异和应用方法。

二、单位详解与解题过程

1. 绝对单位：px

• 定义：px（像素）是绝对单位，1px对应屏幕上的一个物理像素点。其大小固定，不受父元素或视口影响。
• 计算特性：直接设定具体数值（如width: 200px），在任何环境下渲染大小不变。
• 适用场景：
  • 需要精确控制的边框粗细（如border: 1px solid #000）。
  • 固定尺寸的图标或图片。
• 注意事项：在高分辨率屏幕下，1px可能对应多个物理像素，但浏览器会自动处理以保证视觉一致性。

2. 相对单位：em

• 定义：em是相对单位，其基准值取决于当前元素的字体大小（font-size）。
• 计算规则：
  • 若当前元素未设置font-size，则继承父元素的字体大小。
  • 计算公式：实际值 = 设定值 × 当前元素的font-size。
  • 示例：若当前元素font-size: 16px，则2em = 2 × 16px = 32px。
• 嵌套示例：

  .parent { font-size: 20px; }
  .child { 
    font-size: 0.5em;  /* 10px */ 
    padding: 2em;       /* 2 × 10px = 20px */
  }
  

• 适用场景：需要根据字体大小调整间距的场景（如按钮内边距随字体大小变化）。

3. 相对单位：rem

• 定义：rem（Root em）是相对单位，其基准值始终为根元素（html）的字体大小。
• 计算规则：
  • 直接依赖html元素的font-size（默认通常为16px）。
  • 计算公式：实际值 = 设定值 × html的font-size。
  • 示例：若html { font-size: 16px }，则1.5rem = 1.5 × 16px = 24px。
• 优势：避免em的嵌套计算问题，更易于控制整体布局比例。
• 响应式应用：通过媒体查询调整根字体大小，实现整体缩放：

  html { font-size: 16px; }
  @media (min-width: 768px) {
    html { font-size: 18px; } /* 所有rem单位按新基准缩放 */
  }
  

4. 百分比单位：%

• 定义：百分比单位依赖父元素的对应属性值。
• 计算规则：
  • 宽度（width）：相对于父元素的宽度计算。
  • 高度（height）：相对于父元素的高度计算（需父元素有明确高度）。
  • 字体大小（font-size）：相对于父元素的字体大小计算。
  • 示例：父元素width: 300px，子元素width: 50%则宽度为150px。
• 特殊案例：
  • 定位元素：top/left等属性相对于已定位的父元素尺寸计算。
  • 行高（line-height）：相对于当前元素的字体大小计算（如line-height: 150%）。

5. 视口单位：vw/vh

• 定义：vw（视口宽度单位）和vh（视口高度单位）相对于浏览器视口尺寸计算。
• 计算规则：
  • 1vw = 视口宽度的1%，1vh = 视口高度的1%。
  • 示例：视口宽度1200px时，50vw = 600px。
• 扩展单位：
  • vmin：取vw和vh中的较小值。
  • vmax：取vw和vh中的较大值。
• 适用场景：
  • 全屏布局：如设置height: 100vh实现占满整个屏幕高度。
  • 响应式字体：font-size: 4vw使文字随视口宽度缩放。

三、单位选择策略

1. 固定尺寸：使用px（如边框、阴影）。
2. 组件级响应式：使用rem为主单位，通过根字体大小控制整体缩放。
3. 布局容器：使用%或vw/vh实现流体布局。
4. 字体与间距：优先选择rem保证一致性，局部使用em实现相对缩放。

四、实战对比
假设根字体为16px，视口宽度为1200px：

• 2rem = 32px（始终固定）
• 200% = 父元素宽度的两倍（依赖父级）
• 20vw = 240px（随视口变化）
• 2em = 当前字体大小的两倍（可能嵌套变化）

通过理解各单位的计算基准和响应特性，可灵活组合使用，实现精准且自适应的布局效果。