calc函數(shù)怎么用

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

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

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

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

calc函數(shù)不生效？

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

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

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

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

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

水平垂直居中

步驟如下：

• 使子元素相對(duì)于容器元素定位

• 子元素開(kāi)啟絕對(duì)定位

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

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

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

 兩列布局

步驟如下：

• 左邊列開(kāi)啟浮動(dòng)

• 右邊列開(kāi)啟浮動(dòng)

• 右邊列寬度為父級(jí) 100%減去左列的寬度

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

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

sticky footer布局

使用calc函數(shù)實(shí)現(xiàn)sticky footer布局比較簡(jiǎn)單，中間的容器最少高度為視口寬度的100% - 頭部和底部?jī)刹糠值母叨?/code>即可完成該功能。

.container {
    /* 這里的 中間 部分的容器最少為視口寬度的 100% - 頭部和底部?jī)刹糠值母叨燃纯赏瓿稍摴δ?*/
    min-height: calc(100vh - 200px);
}

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