CSS 数据类型 - calc-sum

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>

打印本页