CSS的calc函數用法小結

  發布時間:2022-06-23 17:00:08   作者:一碗周   我要評論
CSS3新增的函數中有一個非常好用的函數,就是calc()函數,用過的都說好,這篇文章我們來嘮一老calc函數,感興趣的朋友一起看看吧

 calc函數怎么用

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

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

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

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

calc函數不生效?

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

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

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

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

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

水平垂直居中

步驟如下:

  • 使子元素相對于容器元素定位

  • 子元素開啟絕對定位

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

實現CSS代碼如下:

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

 兩列布局

步驟如下:

  • 左邊列開啟浮動

  • 右邊列開啟浮動

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

實現CSS代碼如下:

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

sticky footer布局

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

實現CSS代碼如下:

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

全屏布局

實現步驟如下:

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

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

實現CSS代碼如下:

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

到此這篇關于CSS的calc函數用法小結的文章就介紹到這了,更多相關css calc函數內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

  • css中的計算函數calc在網站布局中一個示例

    這篇文章主要介紹了css中的計算函數calc在網站布局中一個示例的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下
    2019-08-12
  • css height屬性中的calc方法詳解

    大家都知道Calc方法有個很大的好處就是用在流體布局上,可以通過calc()計算得到元素的寬度,本文通過一個例子給大家詳細介紹,需要的朋友參考下吧
    2021-06-03
  • CSS使用calc()獲取當前可視屏幕高度的實現

    這篇文章主要介紹了CSS使用calc()獲取當前可視屏幕高度的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編
    2020-07-14
  • 深入理解CSS中的數學表達式calc()

    數學表達式calc()是CSS中的函數,主要用于數學運算。這篇文章給大家介紹了CSS中的數學表達式calc()的相關知識,感興趣的朋友一起看看吧
    2020-01-19
  • 淺析CSS中calc()的使用

    這篇文章主要介紹了淺析CSS中calc()的使用的相關資料,需要的朋友可以參考下
    2016-05-10

最新評論

美丽人妻被按摩中出中文字幕