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

語言: CN / TW / HK

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; }

{完}