CSS calc() 计算器

输入一段 calc() 风格的表达式(支持 + - * / 与括号、带单位数值),按 CSS 的单位规则在浏览器本地计算并输出结果。加减法要求单位一致,乘除法保留单位,解析过程不使用 eval,安全可靠。

表达式 等待输入

支持 + - * / 与括号;数值可带单位(px、%、em、rem、vw、vh 等)。按 Ctrl + Enter 可快速计算。输入仅在本机解析,不会上传服务器。

计算结果
计算结果 —
结果单位 —
输入长度 —
结果字符数 —
输入表达式后点击「计算」,结果将显示在这里。

计算结果基于浏览器本地解析,未使用 eval,结果仅供参考。

计算规则说明
  • 支持四则运算 + - * / 与圆括号,遵循先乘除后加减。
  • 加减法要求两侧单位一致,例如 10px + 5px 合法,10px - 5% 视为单位不一致而无法计算。
  • 乘除法保留单位,例如 2 * 3px 得到 6px,100% / 4 得到 25%。
  • 数值可带 px、%、em、rem、vw、vh 等常见 CSS 单位,也可不带单位。
  • 解析器为自实现的词法分析与递归下降,不调用 eval,表达式不会被执行。
  • 结果仅用于辅助心算与联调,最终效果以浏览器实际渲染为准,结果仅供参考。