Unit

Unit (单位) #

CSS 单位系统性整理 #

CSS 单位是控制元素尺寸、间距、字体大小等属性的核心工具，可分为绝对单位、相对单位及其他特殊单位。以下从基础分类、应用场景及最新趋势进行系统性整理：

一、绝对单位 #

绝对单位的值固定，不依赖其他元素或视口尺寸，适合精确控制或印刷场景。

  1. px（像素）
    最常用单位，代表屏幕上的一个物理像素点。不同设备下实际物理尺寸可能不同，但 CSS 像素通常以 96px = 1 英寸为基准。
  2. in（英寸）
    1in = 2.54cm = 96px，多用于印刷设计。
  3. cm / mm（厘米/毫米）
    基于物理尺寸，适用于打印布局。
  4. pt / pc（点/派卡）
    印刷行业常用，1pt = 1/72in，1pc = 12pt。

二、相对单位 #

相对单位依赖父元素、根元素或视口尺寸，适合响应式设计。

  1. em
    • 相对于父元素的字体大小。若父元素字体为 16px，则 1em = 16px。
    • 嵌套时可能产生级联计算问题（如多层嵌套导致尺寸指数增长）。
  2. rem
    • 相对于根元素（<html>）的字体大小，避免级联问题。
    • 默认根字体为 16px，1rem = 16px，常用于全局布局控制。
  3. %
    • 相对于父元素的对应属性（如宽度百分比为父宽度的 50%）。
  4. 视口单位
    • vw/vh：视口宽度/高度的 1%。
    • vmin/vmax：视口较小/较大尺寸的 1%（如 vmin 在竖屏中为宽度百分比）。
  5. ex / ch
    • ex 基于当前字体小写字母 x 的高度，ch 基于数字 0 的宽度，多用于排版微调。

三、其他单位与函数 #

  1. 角度单位
    • deg（度）、rad（弧度）、grad（百分度）、turn（圈数），用于旋转动画或渐变。
  2. 颜色单位
    • rgb()、rgba()、hsl()、hsla() 及十六进制（如 #FF5733）。
  3. 数学函数
    • calc()：支持动态计算（如 calc(100% - 20px)），允许混合单位运算（如 vw + rem），需注意运算符空格规则。
    • min() / max()：取多个值的极值（如 width: max(50%, 300px)）。
    • clamp()：限制值在范围内（如 clamp(10px, 5vw, 20px)）。

四、当前进展与趋势 #

CSS 值与单位模块 Level 5 草案引入多项新特性，旨在简化代码并增强动态能力：

  1. 增强的 attr() 函数
    • 允许在任意 CSS 属性中使用 HTML 属性值，支持类型转换与备用值（如 width: attr(data-width px, 100px)）。
  2. 新数学函数
    • calc-size()：操作内在尺寸（如 auto 或 fit-content），便于动画过渡。
    • first-valid()：返回第一个有效值（如 color: first-valid(--custom-color, red)）。
  3. 随机化与兄弟元素函数
    • random() / random-item()：生成随机值或从列表中随机选取。
    • sibling-count() / sibling-index()：基于元素在兄弟列表中的位置调整样式。
  4. 逻辑定位扩展
    • 新增 block-start、inline-end 等逻辑值，适应多语言布局方向。

五、总结与建议 #

  • 响应式设计：优先使用 rem、vw、% 等相对单位，结合 clamp() 实现自适应布局。
  • 打印场景：使用 cm、mm 等绝对单位确保物理尺寸精确。
  • 未来趋势：关注 CSS 数学函数与新特性（如 attr() 增强），减少对 JavaScript 的依赖，提升代码简洁性。