CSS 数据类型 <calc-sum> 定义了一个表达式，允许您使用任何数学函数执行计算。表达式执行两个值的加法和减法。
可能的值
<calc-sum> 类型在两个数值之间使用以下算术运算符之一。
- +对两个数字执行加法运算。
- -从第一个数字中减去第二个数字。
语法
calc() = + | -;
要记住的要点
- 表达式中的操作数可以是任何 <length> 语法值。您可以指定<长度>、<频率>、<角度>、<时间>、<百分比>、<数字>或<整数>。
- 您可以在一个表达式中组合不同的单位，例如从 % 中减去 px。例如，calc（50% - 30px） 有效。
- 在计算中包含 CSS 变量，例如 calc（20px + var（--variable））。
- 在 + 和 - 运算符周围添加空格。有效表达式 - calc（40% - 30px），invlid 表达式 - calc（40%-30px）。
CSS cal（） - 加法 （+）
以下示例演示了 calc（） 函数通过将元素高度的 20% 和 50px 相加来计算元素的总高度 -
<html>
<head>
<style>
div {
position: absolute;
height: calc(20% + 50px);
border: 2px solid blue;
background-color: pink;
padding: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>Addition opeartion calc(20% + 50px) on height.</div>
</body>
</html>
CSS cal（） - 减法 （-）
以下示例演示了 calc（） 函数用于计算总宽度，而总宽度又是通过从 200px 中减去元素宽度的 50% 来计算的 -
<html>
<head>
<style>
div {
position: absolute;
width: calc(50% - 200px);
border: 2px solid blue;
background-color: pink;
padding: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>Perform subtraction using calc(50% - 200px) function on width.</div>
</body>
</html>
