CSS 数据类型 <calc-sum> 定义了一个表达式,允许您使用任何数学函数执行计算。表达式执行两个值的加法和减法。
可能的值
<calc-sum> 类型在两个数值之间使用以下算术运算符之一。
- +对两个数字执行加法运算。
- -从第一个数字中减去第二个数字。
语法
要记住的要点
- 表达式中的操作数可以是任何 <length> 语法值。您可以指定<长度>、<频率>、<角度>、<时间>、<百分比>、<数字>或<整数>。
- 您可以在一个表达式中组合不同的单位,例如从 % 中减去 px。例如,calc(50% - 30px) 有效。
- 在计算中包含 CSS 变量,例如 calc(20px + var(--variable))。
- 在 + 和 - 运算符周围添加空格。有效表达式 - calc(40% - 30px),invlid 表达式 - calc(40%-30px)。
CSS cal() - 加法 (+)
以下示例演示了 calc() 函数通过将元素高度的 20% 和 50px 相加来计算元素的总高度 -
CSS cal() - 减法 (-)
以下示例演示了 calc() 函数用于计算总宽度,而总宽度又是通过从 200px 中减去元素宽度的 50% 来计算的 -