CSS 函数 calc() 允许在定义 CSS 属性时计算值。它适用于值 <length>、<Frequency>、<angle>、 <time>、<percentage>、<number> 或 <integer>。
函数 calc() 接受单个表达式作为参数，该表达式的结果用作值。
表达式可以由不同的运算符组成，并遵循运算符优先级的标准规则。
+ 加法。
- 减法
* 乘法。至少其中一个参数必须是 <number>。
/ 除法。右侧必须是 <number>。
要记住的要点:
+ 和- calc() 中的运算符必须用空格分隔以避免混淆。
calc() 中的 * 和 / 运算符不需要空格，但建议包含空格为了保持一致性。
自动布局表和固定布局表中的表列、列组、行、行组和单元格的宽度和高度的百分比数学表达式可以是视为已指定 auto。
允许嵌套 calc() 函数，将内部函数视为简单括号。
calc() 函数不能直接用百分比值替换数值。
对于长度，不能使用 0 来表示 0px 或任何其他长度单位。需要指定单位版本。
语法
calc( <calc-sum> ) 整数的使用
当 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>这是css 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">名字:</label>
<input type="text" id="name" name="name" placeholder="输入名字">
<label for="email">邮箱:</label>
<input type="text" id="email" name="email" placeholder="输入邮箱">
<label for="message">消息:</label>
<textarea id="message" name="message" placeholder="输入消息"></textarea>
<input type="submit" value="提交">
</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>