CSS的calc函數不會還有人沒有用吧

---

theme: fancy highlight: atom-one-light

---

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第19天，點擊查看活動詳情

Hi~，我是一碗周，如果寫的文章有幸可以得到你的青睞，萬分有幸~

🥭 寫在前面

CSS3新增的函數中有一個非常好用的函數，就是calc()函數，用過的都説好，這篇文章我們來嘮一老calc函數。

🍎 calc函數怎麼用

CSS的calc()函數可以實現屬性值的計算，例如下面這段代碼：

css min-height: calc(100vh - 128px);

這段代碼通常會出現在佈局中，64px為頂部欄和底部欄的高度，這樣就可以輕鬆實現Sticky Footer佈局。

calc()函數支持四則運算，但是乘法中必須有一個值是數字，除法的除數必須也是數字（不能是0）。

🍑 calc函數不生效？

在使用calc()函數時，可能會出現不生效的問題，究其原因，就是你的VSCode沒有開代碼格式化功能（開個玩笑）；如果我們將上面那帶代碼修改成：

css min-height: calc(100vh-128px);

他就不會生效，原因是這個屬性值被解析成兩個長度單位，分別是100vh和-128px，所以在我們使用**和****運算符時兩邊必須要有空白字符。

🍏 使用calc函數完成一些佈局方案

CSS3的calc()函數可以幫助我們實現很多佈局方案，我們依次介紹一下。

🍒 水平垂直居中

步驟如下：

1. 使子元素相對於容器元素定位

2. 子元素開啟絕對定位

3. 設置該元素的偏移量，值為50% 減去寬度/高度的一半

實現CSS代碼如下：

css .parent { /* 1. 使子元素相對於本元素定位 */ position: relative; } .child { /* 2. 開啟絕對定位 */ position: absolute; /* 3. 設置該元素的偏移量，值為 50%減去寬度/高度的一半 */ left: calc(50% - 150px); top: calc(50% - 150px); }

🍓 兩列布局

步驟如下：

1. 左邊列開啟浮動

2. 右邊列開啟浮動

3. 右邊列寬度為父級 100%減去左列的寬度

實現CSS代碼如下：

css .left { /* 左邊列開啟浮動 */ float: left; } .right { /* 右邊列開啟浮動 */ float: left; /* 寬度減去左列的寬度 */ width: calc(100% - 200px); }

🫐 sticky footer佈局

使用calc函數實現sticky footer佈局比較簡單，中間的容器最少高度為視口寬度的100% - 頭部和底部兩部分的高度即可完成該功能。

實現CSS代碼如下：

css .container { /* 這裏的 中間 部分的容器最少為視口寬度的 100% - 頭部和底部兩部分的高度即可完成該功能 */ min-height: calc(100vh - 200px); }

🍈 全屏佈局

實現步驟如下：

1. 通過calc函數計算出中間容器的高度。

2. 中間出現滾動條的容器設置overflow: auto即出現滾動條的時候出現滾動條。

實現CSS代碼如下：

css .content { overflow: hidden; /* 通過 calc 計算容器的高度 */ height: calc(100vh - 200px); } .left { height: 100%; } .right { /* 如果超出出現滾動條 */ overflow: auto; height: 100%; } .right-in { /* 假設容器內有500px的元素 */ height: 500px; }

{完}