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中一個非常有用的數學表達式，它可以使我們更加靈活地進行網頁布局和設計。我們可以利用它來減少代碼量，提高開發效率，同時還可以在保證視覺效果的前提下實現更加豐富和多樣化的布局。