CSS 函数 - calc（）

CSS 函数 calc（） 允许在定义 CSS 属性时计算值。它适用于值 <length>, <frequency>, <angle>, <time>, <percentage>, <number> 或 <integer>.

函数 calc（） 接受单个表达式作为参数，并将此表达式的结果用作值。

表达式可以由不同的运算符组成，并遵循运算符优先级的标准规则。

+加法。
-减法
*乘法。至少其中一个参数必须是 <number>。
/划分。右侧必须是 <数字>。

要记住的要点：

calc（）中的 + 和 - 运算符必须用空格分隔，以避免混淆。
calc（）中的 * 和 / 运算符不需要空格，但为了保持一致性，建议包含空格。
在自动布局和固定布局表中的表列、列组、行、行组和单元格上具有宽度和高度百分比的数学表达式可以被视为已指定 auto。
允许嵌套 calc（）函数，将内部函数视为简单的括号。
calc（）函数不能直接用百分比值替换数值。
在长度的情况下，您不能使用 0 表示 0px 或任何其他长度单位。必须指定单位版本。

语法


calc( <calc-sum> )

与 integer 一起使用

当 calc（） 在预期为 <integer> 的上下文中使用时，该值将四舍五入到最接近的整数。例如


.modal {
	 	z-index: calc(6 / 4);
}

这将使 .modal 的最终 z-index 值为 2。

CSS calc（） - 定位对象

以下示例演示了 calc（）的用法。calc（）用于计算框的高度和宽度，从而产生响应式布局，框周围边距恒定 50px。


<html>
<head>
<style>
	 	.container {
	 	 	 width: 100%;
	 	 	 height: 100vh;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 } 		
	 	.box {
	 	 	 width: calc(100% - 99px);
	 	 	 height: calc(100% - 99px);
	 	 	 margin: 50px;
	 	 	 background-color: gray;
	 	 	 text-align: center;
	 	 }
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="box">
	 	 	 	 	<h2>This is an example of calc()</h2>
	 	 	 </div>
	 	</div>
</body>
</html>

CSS calc（） - 自动调整表单字段的大小。

Calc（）还可用于确保表单字段适合可用空间，而不会超出其容器的边缘，同时保持合理的边距。

以下示例显示了使用 calc（）调整表单字段的大小


<html>
<head>
<style>
	 	form {
	 	 	 display: flex;
	 	 	 flex-direction: column;
	 	 	 align-items: center;
	 	 	 	 	background-color: lightblue;
	 	}
	 	input[type="text"], textarea {
	 	 	 width: calc(100% - 50px);
	 	 	 padding: 10px;
	 	 	 margin: 10px;
	 	 	 border-radius: 5px;
	 	 	 border: 1px solid #ccc;
	 	 	 resize: none;
	 	}
	 	input[type="submit"] {
	 	 	 padding: 10px 20px;
	 	 	 margin: 10px;
	 	 	 border-radius: 5px;
	 	 	 border: none;
	 	 	 background-color: #4CAF50;
	 	 	 color: #fff;
	 	 	 font-size: 16px;
	 	 	 cursor: pointer;
	 	}
</style>
</head>
<body>
	 	<form>
	 	 	 <label for="name">Name:</label>
	 	 	 <input type="text" id="name" name="name" placeholder="Enter your name">
	 	 	 <label for="email">Email:</label>
	 	 	 <input type="text" id="email" name="email" placeholder="Enter your email">
	 	 	 <label for="message">Message:</label>
	 	 	 <textarea id="message" name="message" placeholder="Enter your message"></textarea>
	 	 	 <input type="submit" value="Submit">
	 	</form>
</body>
</html>

CSS calc（） - 使用 CSS 变量嵌套 calc（）

calc（）也可以与 CSS 变量结合使用。以下示例显示了带有 CSS 变量的 calc（）


<html>
<head>
<style>
	 	:root {
	 	 	 --width: 200px;
	 	 	 --padding: 20px;
	 	}
	 	.container {
	 	 	 width: calc(var(--width) + var(--padding));
	 	 	 background-color: lightgray;
	 	 	 padding: var(--padding);
	 	}
	 	.box {
	 	 	 width: calc(var(--width) / 2);
	 	 	 height: calc(var(--width) / 2);
	 	 	 background-color: black;
	 	 	 margin: 0 auto;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	<div class="box"></div>
</div>
</body>
</html>

打印本页