Css计算--calc（）方法

最新推荐文章于 2026-05-16 13:49:26 发布

转载最新推荐文章于 2026-05-16 13:49:26 发布 · 1.3w 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

前端同时被 2 个专栏收录

46 篇文章

订阅专栏

CSS学习

5 篇文章

订阅专栏

本文深入探讨CSS中的calc()函数，介绍其如何用于执行属性值的计算，适用于长度、频率、角度、时间、数字和整数等类型。文章详细解释了加法、减法、乘法和除法的操作，并提供了正确的表达式格式和注意事项。

概述

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>, <angle>、<time>、<number>、或<integer>。

语法

/* property: calc(expression) */
width: calc(100% - 80px);

此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

加法（ + ）
减法（ - ）
乘法（ * ），乘数中至少要有一个是 <number> 类型的
除法（ / ），除数（/右面的数）必须是 <number> 类型的

表达式中的操作数可以使用任意<length> 值。如果你愿意，你可以在一个表达式中混用这类值的不同单位。在需要时，你还可以使用小括号来建立计算顺序。

注：

用 0 作除数会让 HTML 解析器抛出异常.
（+）和（-）运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式：一个百分比后跟一个负数长度值。而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。
（*）和（/）运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。
涉及自动和固定布局表中的表列，表列组，表行，表行组和表单元格的宽度和高度百分比的数学表达式可视为已指定auto。

正式语法

calc( <calc-sum> )
where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )