CSS 里严格意义上“能做计算”的，不是“计算属性”，而是“函数（functions）”和“支持表达式的属性值”。
calc()只是最常见的一种。
下面给你系统梳理：CSS 中所有“可计算能力”相关的东西。

一、最核心：calc() ⭐⭐⭐⭐⭐

JavaScript
width: calc(100% - 80px);

支持：

• 加 +
• 减 -
• 乘 *
• 除 /

⚠️ 但乘/除限制很多（只能和数字配合）

二、CSS 数学函数（CSS Values & Math Functions）

1. min() ⭐

JavaScript
width: min(300px, 50%);
👉 取更小的那个

2. max() ⭐

JavaScript
width: max(200px, 30%);
👉 保证不会小于某个值（常用于响应式）

3. clamp() ⭐⭐⭐（非常重要）

JavaScript
font-size: clamp(16px, 2vw, 24px);

结构：

三、CSS 变量计算（var + calc 组合）⭐⭐⭐

JavaScript
:root {
  --base: 10px;
}

.box {
  margin: calc(var(--base) * 2);
}

👉 变量 + 计算 = 高频面试点

四、数学函数嵌套（进阶）

JavaScript
width: calc(min(50%, 400px) - 20px);
👉 现代浏览器支持嵌套函数

五、attr()（“准计算能力”）

CSS

JavaScript
width: attr(data-size px);

HTML：

JavaScript
<div data-size="200"></div>

⚠️ 现状： 目前大多数属性 只能用于 content，计算宽高支持非常有限（实验性）

六、CSS 单位本身的“隐式计算”

这些虽然不是函数，但属于“计算体系”

1. vw / vh（视口计算）

2. vmin / vmax

3. rem（根字体计算）

JavaScript
html {
  font-size: 16px;
}

p {
  font-size: 2rem; /* 32px */
}

七、CSS 容器查询计算（新趋势）

JavaScript
@container (min-width: 400px) {
  .box {
    font-size: 20px;
  }
}

👉 基于“容器尺寸”计算样式（不是 viewport）

八、总结：CSS“计算能力”全家桶

九、考试/面试最容易问的3个点

一定要记住：

container query 里的“容器”到底是谁？

👉 默认情况下：容器 = 当前元素最近的“已开启容器能力”的祖先元素（通常就是父级）

JavaScript
.wrapper {
container-type: inline-size;   //使wrapper成为容器，必须要有container-type。
}

@container (min-width: 400px) {
.card {
font-size: 18px;
}
}