CSS 動態(tài)計(jì)算，calc使用指南

CSS有一個特殊的calc()函數(shù)，用于做基本的數(shù)學(xué)運(yùn)算。下面是一個例子：

.main-content {  /* Subtract 80px from 100vh */  height: calc(100vh - 80px);}

在本指南中，讓我們來介紹一下關(guān)于這個非常有用的功能所需要了解的一切。

calc() 只作用于屬性值

你唯一可以使用calc()函數(shù)的地方是在值中。請看這些例子，我們在這些例子中設(shè)置了一些不同屬性的值。

.el {  font-size: calc(3vw + 2px);  width:     calc(100% - 20px);  height:    calc(100vh - 20px);  padding:   calc(1vw + 5px);}

它也可以僅用于部分屬性，例如：

.el {  margin: 10px calc(2vw + 5px);  border-radius: 15px calc(15px / 3) 4px 2px;  transition: transform calc(1s - 120ms);}

它甚至可以成為構(gòu)成屬性一部分的另一個功能的一部分！例如，這里的calc() 用于漸變的色標(biāo)中

.el {  background: #1E88E5 linear-gradient(  to bottom,  #1E88E5,  #1E88E5 calc(50% - 10px),  #3949AB calc(50% + 10px),  #3949AB  );}

calc() 用于長度和其他數(shù)值

請注意，以上所有示例本質(zhì)上都是基于數(shù)字的。我們會講到一些數(shù)的使用注意事項(xiàng)（因?yàn)橛袝r你不需要單位），但這是針對數(shù)字的數(shù)學(xué)，而不是字符串之類的東西。

.el {  /* Nope! */  counter-reset: calc("My " + "counter");}.el::before {  /* Nope! */  content: calc("Candyman " * 3);}

CSS有很多長度，它們都可以與calc() 一起使用：

• px
• %
• em
• rem
• in
• mm
• cm
• pt
• pc
• ex
• ch
• vh
• vw
• vmin
• vmax

無單位的數(shù)字也是可以接受的，例如line-height：calc（1.2 * 1.2）; 以及諸如transform：rotate（calc（10deg * 5））;之類的角度。

您也可以不執(zhí)行任何計(jì)算并且仍然有效：

.el {  /* Little weird but OK */  width: calc(20px);}

不能在媒體查詢中使用

當(dāng)正確使用calc()時（長度單位作為屬性的值），可悲的是，當(dāng)應(yīng)用于媒體查詢時，calc()將無法工作。

@media (max-width: 40rem) {  /* Narrower or exactly 40rem */}
/* Nope! */@media (min-width: calc(40rem + 1px)) {  /* Wider than 40rem */}

有一天，這將是很酷的，因?yàn)槟憧梢杂靡环N相當(dāng)合理的方式（如上）進(jìn)行相互排斥的媒體查詢。

混合單位

這也許是calc()最有價(jià)值的功能! 幾乎上面的每一個例子都已經(jīng)做到了這一點(diǎn)，但只是為了強(qiáng)調(diào)一下，這里是將不同的單位混合在一起。

/* Percentage units being mixed with pixel units */width: calc(100% - 20px);

這是說。?元素的寬度，減去20個像素就可以了。

在流體寬度的情況下，完全沒有辦法單獨(dú)用像素來預(yù)計(jì)算這個值。換句話說，你不能用Sass這樣的東西來預(yù)處理calc()，因?yàn)樗且粋€試圖完成的polyfill。不是說你需要這樣做，因?yàn)闉g覽器的支持很好。但問題是，當(dāng)你用這種方式混合單位時，必須在瀏覽器中完成（在 "運(yùn)行時"），這也是calc()的大部分值。

下面是其他一些混合單位的例子。

transform: rotate(calc(1turn + 45deg));
animation-delay: calc(1s + 15ms);

這些可能會被預(yù)處理，因?yàn)樗鼈兓旌狭伺c運(yùn)行時確定的任何單位都不相關(guān)的單位。

與預(yù)處理器數(shù)學(xué)比較

我們剛剛介紹了您無法預(yù)處理calc（）可以執(zhí)行的最有用的操作。但是有一點(diǎn)重疊。例如，Sass內(nèi)置了數(shù)學(xué)功能，因此您可以執(zhí)行以下操作：

$padding: 1rem;
.el[data-padding="extra"] {  padding: $padding + 2rem; // processes to 3rem;  margin-bottom: $padding * 2; // processes to 2rem; }

甚至帶有單位的數(shù)學(xué)也可以在這里工作，將相同單位的值相加或乘以無單位數(shù)。但是您不能混合使用單位，并且它與calc（）有類似的限制（例如，乘和除必須使用無單位的數(shù)字）。