calc函數(shù)怎么用

CSS的calc()函數(shù)可以實(shí)現(xiàn)屬性值的計(jì)算，例如下面這段代碼：

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

這段代碼通常會出現(xiàn)在布局中，64px為頂部欄和底部欄的高度，這樣就可以輕松實(shí)現(xiàn)Sticky Footer布局。

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

calc函數(shù)不生效？

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

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

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

使用calc函數(shù)完成一些布局方案

CSS3的calc()函數(shù)可以幫助我們實(shí)現(xiàn)很多布局方案，我們依次介紹一下。

水平垂直居中

步驟如下：

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

• 子元素開啟絕對定位

• 設(shè)置該元素的偏移量，值為50% 減去寬度/高度的一半

實(shí)現(xiàn)CSS代碼如下：

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

 兩列布局

步驟如下：

• 左邊列開啟浮動

• 右邊列開啟浮動

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

實(shí)現(xiàn)CSS代碼如下：

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

sticky footer布局

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

實(shí)現(xiàn)CSS代碼如下：

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

全屏布局

實(shí)現(xiàn)步驟如下：

• 通過calc函數(shù)計(jì)算出中間容器的高度。

• 中間出現(xiàn)滾動條的容器設(shè)置overflow: auto即出現(xiàn)滾動條的時(shí)候出現(xiàn)滾動條。

實(shí)現(xiàn)CSS代碼如下：

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

到此這篇關(guān)于CSS的calc函數(shù)用法小結(jié)的文章就介紹到這了,更多相關(guān)css calc函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論