CSS 函数详解

约 294 字小于 1 分钟

布欧-Lewyon

2026-05-16

calc()

.element {
  width: calc(100% - 40px);
  height: calc(100vh - 80px);
  font-size: calc(1rem + 0.5vw);
  padding: calc(var(--gap) * 2);
  /* 混合单位、乘除运算 */
}

min() / max()

/* min: 取较小值 */
.container { width: min(90%, 1200px); }

/* max: 取较大值 */
.hero { font-size: max(3rem, 5vw); }

clamp()

限制值在区间内：

/* clamp(min, preferred, max) */
h1 { font-size: clamp(1.5rem, 3vw + 1rem, 3rem); }

attr()

读取 HTML 属性的值：

.tooltip::after {
  content: attr(data-tip);
}

env()

读取环境变量（如安全区域）：

/* iPhone 刘海屏安全区域 */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

数学函数

.element {
  width: round(15.7px);      /* 四舍五入 → 16px */
  width: mod(15px, 4px);     /* 取模 → 3px */
  width: rem(15px, 4px);     /* 取余 → 3px */
  width: abs(-15px);         /* 绝对值 → 15px */
}

小结

函数	作用
`calc()`	混合单位计算
`min()` / `max()`	取较小/较大值
`clamp()`	值区间限制
`attr()`	读取 HTML 属性
`env()`	环境变量（安全区域）

上一节：自定义属性（CSS 变量）下一节：计数器与形状