calc()、min()、max()、clamp()是原生CSS函数，无需引入；calc()加减号前后必须空格，单位需同量纲；min()/max()实时计算参数值并比较；clamp()严格按MIN/VAL/MAX顺序，VAL须可响应。
calc()、min()、max()、clamp() 这四个函数不是“引入”的——它们是原生 CSS 功能，直接写在属性值里就能用，不需要 import、require 或 polyfill（IE11 除外）。
calc() 中的空格不是可选的，是语法硬性要求
calc() 表达式里所有加减号前后必须有空格。
比如 calc(100% - 20px) 合法，但 calc(100%-20px) 会完全失效，浏览器当成无效声明丢弃。
乘除号虽允许紧贴（如 calc(10px<em>2)</em>），但统一加空格更安全：calc(10px 2)。
常见错误现象：样式没生效、DevTools 里该行显示为 strike-through 灰色，大概率就是空格漏了。
不要在表达式里混用不兼容单位，例如 calc(100px + 1s) 或 calc(20deg * 2) —— 只支持长度、频率、角度、时间、分辨率等同类量纲的运算。
min() 和 max() 不是“取最小/最大宽度”，而是按上下文实时求值
min() 返回参数列表中计算结果最小的那个值，max() 同理。
它们不预设用途，但典型场景是：
-
min(50%, 600px)控制容器“最多占一半，且不超过 600px” -
max(300px, 20vh)确保元素“至少 300px 宽，或视口高的 20%，取更大者”
注意：浏览器会逐个计算每个参数（比如50%是相对于父容器宽度算的，600px是绝对值），再比大小。
如果父容器宽只有 400px，那50%就是 200px，min(50%, 600px)结果就是 200px —— 它不是“上限”，而是真正在比数值。
clamp() 的三个参数顺序不能错，且首选值（中间项）必须可响应
立即学习“前端免费学习笔记（深入）”；
clamp(MIN, VAL, MAX) 严格按此顺序：最小值、首选值、最大值。VAL 必须是能随环境变化的值（如 50%、4vw、calc(1rem + 1vw)），否则就退化成静态限制。
例如：font-size: clamp(16px, 4vw, 24px) 表示：
- 视口很小时，
4vw< 16px → 取 16px - 视口中等时，16px ≤
4vw≤ 24px → 取4vw - 视口很大时，
4vw> 24px → 取 24px
容易踩的坑：把clamp(16px, 24px, 4vw)这样写反，会导致永远取不到响应效果；或者用固定值如clamp(16px, 20px, 24px)，那就和直接写20px没区别。
多个函数可以嵌套，但别让逻辑绕晕自己
min()、max()、clamp() 都支持嵌套，calc() 也能出现在它们内部，比如：width: min(calc(100% - 40px), 1200px)font-size: clamp(1rem, calc(1rem + 0.25vw), 1.5rem)
但嵌套过深会让调试变难。建议：
- 先用
calc()处理基础运算（如减去边距） - 再用
min()/max()加边界控制 - 最后用
clamp()做三段式约束
真正复杂的需求（比如多断点非线性缩放），clamp()本身无法替代媒体查询，它只适合平滑过渡区间。
