正在加载...
CSS calc 与数学函数
自定义属性给值起了名字。数学函数在渲染时计算：从 100% 减去侧栏、用 min() 限宽、用 clamp() 做流畅字号——无需 Sass 构建。
calc() — 在属性值里运算
表达式写在 calc(...) 内。加号和减号两侧要有空格：
:root {
--sidebar-w: 16rem;
--gap: 1rem;
}
.layout {
display: flex;
gap: var(--gap);
}
.sidebar {
flex: 0 0 var(--sidebar-w);
}
.main {
flex: 1 1 auto;
min-width: 0;
/* readable fallback when flex alone is not enough */
max-width: calc(100% - var(--sidebar-w) - var(--gap));
}
可混合 %、rem、px、vw 与 var()，只要结果对该属性有效。
空格与单位规则
无效：calc(100%-2rem)。有效：calc(100% - 2rem)。* 中至少一侧为数字。
.card {
--space: 0.75rem;
padding: var(--space) calc(var(--space) * 2);
margin-block: calc(var(--space) / 2);
}
min() 与 max()
min() 取最小；max() 取最大：
.hero-inner {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}
.feature-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
clamp() — 有上下界的流畅值
顺序：最小、首选、最大。
:root {
--text-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
--heading-lg: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
body {
font-size: var(--text-base);
}
h1 {
font-size: var(--heading-lg);
line-height: 1.2;
}
这些函数在计算值阶段求值——与 :root 上的 token 配合，并像其他长度一样遵循层叠。
何时用哪个？
📊 数学函数一览
| 函数 | 含义 | 典型用途 |
|---|---|---|
| calc() | 单属性公式 | 减 gutter、token 加倍 |
| min() | 「不超过…」 | 宽度上限 |
| max() | 「至少…」 | 最小尺寸 |
| clamp() | min + 首选 + max | 流畅字号 |
简单页面高度
:root {
--header-h: 4rem;
}
.page {
min-height: max(100vh, calc(100vh - var(--header-h) + 100%));
}
/* simpler pattern most teams use */
.page-simple {
min-height: calc(100vh - var(--header-h));
display: flex;
flex-direction: column;
}
动手试
- 两栏布局，main 上用
calc。 - 固定
font-size换成clamp。 - 文章 wrapper 用
min(100%, 40rem)。 - 重复公式放到
:roottoken。 - 修正
calc(100%-1rem)的空格。
常见错误
calc(100%-2rem)无空格clamp最小大于最大- 要上限却用
max()（常应min()） - 在属性名里写
calc - 两个长度相除
小结
calc()—+/-旁要有空格min()/max()— 从列表取极值clamp()— 有界的流畅排版- 与
var(--tokens)配合 - 下一课：CSS 嵌套
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
6
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部