CSS calc() 语法
在 CSS 中，calc() 函数用于执行数值计算，并将计算结果作为 CSS 属性值。它可以使得我们能够使用加、减、乘、除的方式来计算长度值、角度值、时间值等，并且特别适合用于对不同单位的值进行计算。
语法：
property: calc(expression);说明：
property 是一个 CSS 属性值，例如 width、height、margin 等。expression 是一个计算表达式，它可以是不同单位的数值和运算符。
calc() 函数支持以下 4 种运算符。
+：加法。-：减法。*：乘法。/：除法。
在使用 calc() 函数时，小伙伴们要注意以下几点。
1. 运算符两边需要有空格
calc() 函数中的运算符的 “前面” 和 “后面” 都必须要有一个空格，否则就会报错。
/* 正确 */
width: calc(100% - 10px)
/* 错误 */
width: calc(100%-10px)2. 支持多种不同类型的值
calc() 函数不仅支持长度（如 100px、10em、50% 等），还支持角度（如 30°）、时间（如 2s）、频率（如 100Hz）等。比如：
/* 旋转30度加10度 */
transform: rotate(calc(30deg + 10deg));3. 支持不同单位之间的计算
calc() 可以混合不同的单位进行计算，比如百分比和像素。
/* 100% 宽度减去 100px */
width: calc(100% - 100px); 4. 支持嵌套计算
calc() 还支持嵌套计算，我们可以在一个 calc() 表达式中再使用另一个 calc()。比如：
/* 先计算宽度的一半，再减去 10px */
width: calc(calc(100% / 2) - 10px);不过这种嵌套写法还可以简写成：
width: calc((100% / 2) - 10px);也就是说，在 calc() 函数的内部不需要再次写 calc() 关键字，直接使用括号即可。
提示: calc 是 “calculate（计算）” 的缩写。
CSS calc() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS calc() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS calc() 函数是如何使用的。
示例 1：calc() 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.father {
width: 400px;
height: 100px;
background-color: skyblue;
}
.son {
width: calc(100% - 100px);
height: 100px;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们给子元素设置了 width: calc(100% - 100px);，此时子元素最终宽度就等于父元素宽度的 100% 减去 100 px。
示例 2：calc() 实现响应式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
width: 100%;
height: 200px;
display: flex;
}
aside {
width: calc(20% - 10px); /* 占 20% 宽度，并减去 10px 的间距 */
margin-right: 10px;
background-color: lightskyblue;
}
main {
width: calc(80% - 10px); /* 占 80% 宽度，并减去 10px 的间距 */
margin-left: 10px;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="container">
<aside>侧边栏</aside>
<main>主要区域</main>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，aside 的宽度等于 “容器宽度的 20% 减去 10px”，而 main 的宽度等于 “容器宽度的80% 减去 10px”。
通过这种方式，我们就可以在它们之间创建一个固定的 10px 的间距了。
示例 3：calc() 结合 CSS 变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 移除 body 的默认 margin，确保全屏高度计算正确 */
body {
margin: 0;
}
/* 定义 CSS 变量 */
:root {
--header-height: 60px;
}
header {
height: var(--header-height);
background-color: salmon;
}
main {
height: calc(100vh - var(--header-height)); /* 内容区域高度为视口高度减去 header 高度 */
background-color: lightskyblue;
}
</style>
</head>
<body>
<header>头部区域</header>
<main>内容区域</main>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们首先在 :root {} 中定义了一个全局的 CSS 变量（即 --header-height）。然后 main 元素的高度是根据 --header-height 的值来计算的。
height: calc(100vh - var(--header-height));在上面这句代码中，100vh 表示视口（viewport）的高度。然后 main 元素的 height 的值，等于 100vh 减去 --header-height 的值。
