计算函数

CSS 计算函数把尺寸、比例和边界写在声明里。calc() 组合不同单位，min() 选择上限，max() 选择下限，clamp() 同时表达最小、偏好和最大值。

.page { inline-size: min(100% - 2rem, 72rem); }
.title { font-size: clamp(2rem, 5vw, 4rem); }
.sidebar { inline-size: max(16rem, 25vw); }

函数不是业务逻辑引擎。单位必须可计算，百分比的参考对象要明确，嵌套 calc() 与自定义属性的空格和类型也会影响解析。计算结果仍受父容器、最小内容尺寸和溢出规则约束。

实验与练习

用同一标题分别设置固定值、calc() 和 clamp()，在窄、中、宽视口记录计算结果。给 token 写入空值和非法值，查看声明何时失效；再用 min() 限制阅读容器，验证长文本不无限变宽。

可运行微实验：能力检测与降级

先用 @supports 检测容器查询、cascade layers 或逻辑属性，再在支持与不支持路径提供同一内容的可用布局。用不同语言方向和不同容器宽度测试，记录哪些样式来自现代能力、哪些来自基础 CSS。

常见错误

• 以为 calc(100% - 2rem) 的百分比总是相对视口。
• 忽略 box-sizing 和父容器的内边距。
• 用复杂计算函数掩盖应由布局结构表达的问题。

继续阅读

视口计算之外，下一篇让组件根据自身容器响应：容器查询。

练习

1. 用最小输入复现“计算函数”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案