上查看所有课程
CSS 的 calc() 函数允许我们通过表达式来计算属性值。例如：
h1 {
width: calc(100% - 100px);
background-color: greenyellow;
}浏览器输出
在此，h1 元素的 width 是通过 calc() 函数计算得出的。
calc() 函数常用于灵活且响应式的布局。它有助于调整宽度、高度、边距、内边距、字体大小，并且能很好地与媒体查询配合使用。
CSS calc() 语法
calc() 函数的语法如下：
property: calc(expression);此处，expression 可以是任何基于数字的表达式。
表达式可以是以下运算符的组合：
+：通过将两个操作数相加来计算值-：通过将两个操作数相减来计算值*：通过将两个操作数相乘来计算值/：通过将第一个操作数除以第二个操作数来计算值
表达式中的操作数可以是任何单位，例如 px、%、em 等。
示例：CSS calc() 函数
让我们看看如何使用 calc() 函数来设置元素的 width 和 height：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS calc()</title>
</head>
<body>
<div class="addition">width: calc(80% + 40px)</div>
<div class="subtraction">width: calc(80% - 40px)</div>
<div class="division">width: calc(100% / 4)</div>
<div class="multiplication">width: calc(25% * 4)</div>
</body>
</html>div.addition {
width: calc(80% + 40px);
}
div.subtraction {
width: calc(80% - 40px);
}
div.division {
width: calc(100% / 4);
}
div.multiplication {
width: calc(25% * 4);
}
div {
border: 2px solid black;
background-color: greenyellow;
margin-bottom: 12px;
}浏览器输出
上面的示例说明了如何使用不同的运算符的 calc() 函数来计算 div 元素的 width。
要点
calc() 函数要求运算符的行为有所不同。让我们看看要点：
1. 加法 (+) 和减法 (-) 运算符要求数字具有长度单位，并且必须用空格分隔。例如：
/* valid */
margin: calc(8px + 10px);
/* invalid, 10 don't have any length unit */
margin: calc (8px + 10);
/* invalid (no space between + operator) */
margin: calc(8px+10px);2. 除法 (/) 运算符要求第二个数字是无单位的。例如：
/* valid */
margin: calc(80px / 5);
/* invalid (the second unit has the length unit) */
margin: calc(80px / 5px)
/* valid (space is not compulsory) */
margin: calc(80px/5)3. 乘法 (*) 运算符要求其中一个操作数是无单位的。操作数的顺序无关紧要。例如：
/* valid */
margin: calc(20px * 3);
/* valid */
margin: calc(3 * 20px)
/* invalid (one operand should be unitless */
margin: calc(3px * 20px)混合单位
calc() 函数表达式中的长度单位可以混合使用以计算单个值。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS calc()</title>
</head>
<body>
<p>
The calc(100% - 100px) function reduces the width by 100px from the
entire width of the paragraph. The 100px space is distributed in the
horizontal margin.
</p>
</body>
</html>p {
/* reduces 100px width from the entire width */
width: calc(100% - 100px);
/* distributes the 100px space evenly for the horizontal margin. */
margin: auto;
background-color: greenyellow;
border: 2px solid black;
}浏览器输出
在上面的示例中，calc(100%-100px) 将 p 元素的宽度从总宽度中减去了 100px。剩余的 100px 宽度分布在水平外边距中。
CSS 嵌套 calc() 函数
calc() 函数可以嵌套以执行复杂的计算，并创建更具动态性和灵活性的样式。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS calc()</title>
</head>
<body>
<div class="first">width: 400px;</div>
<div class="second">width: calc(400px - calc(100px + 60px))</div>
<div class="third">width: calc(calc(100% - 20px) / 2);</div>
</body>
</html>div.first {
width: 400px;
background-color: skyblue;
}
div.second {
width: calc(500px - calc(100px + 60px));
background-color: greenyellow;
}
div.third {
width: calc(calc(100% - 50px) / 2);
background-color: orange;
}
div {
border: 2px solid black;
margin: 12px;
}浏览器输出
上面的示例说明了如何使用嵌套的 calc() 函数来创建不同的宽度。
内部的 calc() 函数会首先计算，然后是外部函数。
内部的 calc() 函数被视为简单的括号。因此，我们可以仅使用一对括号来确定运算顺序，并获得相同的结果。例如：
width: calc(400px - calc(100px + 60px))等同于：
width: calc(400px - (100px + 60px))与使用 calc() 函数指定运算顺序相比，这更容易阅读。