CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。
.foo {
width: calc(100px + 50px);
}
为什么是 calc()
如果你使用过 CSS 预处理器，比如 SASS，以上示例你或许碰到过
.foo {
width: 100px + 50px;
}
$width-one: 100px;
$width-two: 50px;
.bar {
width: $width-one + $width-two;
}
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
然而，calc() 函数提供了更好的解决方案。首先，我们能够组合不同的单元。特别是，我们可以混合计算绝对单位（比如百分比与视口单元）与相对单位（比如像素）。例如，我们可以创造一个表达式，用一个百分比减掉一个像素值。
.foo {
width: calc(100% - 50px);
}
本例中，.foo 元素总是小于它父元素宽度 50px。
第二，使用 calc()，计算值是表达式它自己，而非表达式的结果。当使用 CSS 预处理器做数学运算时，给定值为表达式的结果。
.foo {
width: 100px + 50px;
}
.foo {
width: 150px;
}
然而，浏览器解析的 calc() 的值为真实的 calc() 表达式。
.foo {
width: calc(100% - 50px);
}
.foo {
width: calc(100% - 50px);
}
这意味着浏览器中的值可以更加灵活，能够响应视口的改变。我们能够给元素设定一个高度为视口的高度减去一个绝对值，它将随视口的改变进行调节。
使用 calc()
calc() 函数可以用来对数值属性执行四则运算。比如，
，，，
发表评论 (审核通过后显示评论)：