CSS中的calc函数是一种强大的数学表达式，可以帮助我们更便捷地进行网页布局和设计。

.box {width: calc(100% - 20px);height: calc(50vh - 40px);}

上面的代码是一个简单的例子，我们可以发现calc函数的基本用法是在数学运算符两侧加入空格，例如“calc(100% - 20px)”。这意味着我们可以以相对值减去绝对值来计算出固定的宽度或高度。

calc函数还支持四种数学运算符：“+”、“-”、“*”和“/”。我们可以把它们随意组合以实现更复杂的数学运算。

.box {width: calc((100% - 20px) / 3 * 2);height: calc((50vh - 40px) * 0.8);}

另外，我们还可以在calc函数中使用CSS变量，以实现更加动态和可定制化的网页布局。

:root {--main-w: 100%;--main-h: 50vh;}.box {width: calc(var(--main-w) - 20px);height: calc(var(--main-h) - 40px);}

总之，calc函数是CSS中一个非常有用的数学表达式，它可以使我们更加灵活地进行网页布局和设计。我们可以利用它来减少代码量，提高开发效率，同时还可以在保证视觉效果的前提下实现更加丰富和多样化的布局。