css l数字相加,CSS calc()的完整指南
CSS具有calc()執(zhí)行基本數(shù)學(xué)運(yùn)算的特殊功能。
.main-content {
/* 從100vh減去80px */
height: calc(100vh - 80px);
}
在本指南中，我將介紹有關(guān)此非常有用的功能的所有知識。 推薦閱讀之前寫過一篇類似文章《css3 calc()屬性介紹以及自適應(yīng)布局使用方法》。
calc()用于值
可以使用calc()函數(shù)的唯一地方是值。請看下面這些示例，其中我們?yōu)樵S多不同的屬性設(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)成屬性一部分的另一個函數(shù)的一部分！例如，在顏色漸變屬性中使用calc()：
.el {
background: #1E88E5 linear-gradient(
to bottom,
#1E88E5,
#1E88E5 calc(50% - 10px),
#3949AB calc(50% + 10px),
#3949AB
);
}
calc()用于長度和其他數(shù)字事物
請注意，以上所有示例本質(zhì)上都是基于數(shù)字的。我們將討論一些數(shù)字使用方法的注意事項(因為有時不需要單位)，但這是用于數(shù)字?jǐn)?shù)學(xué)的，而不是字符串或類似的東西。
.el {
/* 不可以! */
counter-reset: calc("My " + "counter");
}
.el::before {
/* 不可以! */
content: calc("Candyman " * 3);
}
CSS有很多長度，它們都可以用于calc()：
px
%
em
rem
in
mm
cm
pt
pc
ex
ch
vh
vw
vmin
vmax
當(dāng)然沒有單位數(shù)也可以接受，例如line-height: calc(1.2 * 1.2);，如transform: rotate(calc(10deg * 5));。
當(dāng)我們不用calc()去執(zhí)行任何計算時，它仍然有效：
.el {
/* 有點(diǎn)怪，不過還好 */
width: calc(20px);
}
不接受媒體查詢
如果calc()使用正確(將長度單位用作屬性的值)，則將其calc()應(yīng)用于媒體查詢時無法使用。
@media (max-width: 40rem) {}
/* 不可以 */
@media (min-width: calc(40rem + 1px)) {}
混合單元
這也許是最能體現(xiàn)calc()價值的功能！上面幾乎每個示例都已經(jīng)做到了這一點(diǎn)，但只是要指出一點(diǎn)，這里混合了不同的長度單元：
width: calc(100% - 20px);
這就是說：元素的寬度為負(fù)20像素。
有字面上沒有辦法預(yù)先計算出在流體寬度的情況下單獨(dú)的像素值。換句話說，calc()無法使用Sass之類的東西進(jìn)行預(yù)處理，以嘗試完成polyfill。不需要，因為瀏覽器支持很好。但是要點(diǎn)是，當(dāng)我們以這種方式混合單位時，必須在瀏覽器中(“運(yùn)行時”)完成操作，這是的大部分值calc()。
這是混合單元的其他一些示例：
transform: rotate(calc(1turn + 45deg));
animation-delay: calc(1s + 15ms);
這些可能會被預(yù)處理，因為它們混合了與運(yùn)行時確定的任何單位都不相關(guān)的單位。
與預(yù)處理器數(shù)學(xué)比較
我們剛剛介紹了無法預(yù)處理calc()可以做的最有用的事情。但是有一點(diǎn)需要注意，例如，Sass內(nèi)置了數(shù)學(xué)功能，因此可以執(zhí)行以下操作：
$padding: 1rem;
.el[data-padding="extra"] {
padding: $padding + 2rem;
margin-bottom: $padding * 2;
}
甚至帶有單位的數(shù)學(xué)也可以在這里工作，將相同單位的值相加或乘以無單位數(shù)。但是你不能混合使用單位，并且它也有類似的限制calc()(例如，乘法和除法必須使用無單位的數(shù)字)。
數(shù)學(xué)計算
例如，通過calc()假設(shè)你需要計算準(zhǔn)確1 / 7個元素的寬度
.el {
/* 這更容易理解 */
width: calc(100% / 7);
/* 傳統(tǒng)的寫法 */
width: 14.2857142857%;
}
這可能會在某種自行創(chuàng)建的CSS API中獲得成功，例如：
[data-columns="7"] .col { width: calc(100% / 7); }
[data-columns="6"] .col { width: calc(100% / 6); }
[data-columns="5"] .col { width: calc(100% / 5); }
[data-columns="4"] .col { width: calc(100% / 4); }
[data-columns="3"] .col { width: calc(100% / 3); }
[data-columns="2"] .col { width: calc(100% / 2); }
calc()的數(shù)學(xué)運(yùn)算符
數(shù)學(xué)運(yùn)算符+，-，*，和/ 對于大家來說并不陌生。但是這里在使用它們的方式上有所不同。
加號(+)和減號(-)要求兩個數(shù)字均為長度
.el {
/* 有效 👍 */
margin: calc(10px + 10px);
/* 無效 👎 */
margin: calc(10px + 5);
}
無效的值會使整個單獨(dú)的聲明無效。
除(/)要求第二個數(shù)字不能為無單位
.el {
/* 有效👍 */
margin: calc(30px / 3);
/* 無效 👎 */
margin: calc(30px / 10px);
/* 無效👎 (不能除以0) */
margin: calc(30px / 0);
}
乘法(*)要求數(shù)字之一為無單位
.el {
/* 有效👍 */
margin: calc(10px * 3);
/* 有效 👍 */
margin: calc(3 * 10px);
/* 無效 👎 */
margin: calc(30px * 3px);
}
空格很重要
可以進(jìn)行加法和減法。
.el {
/* 有效👍 */
font-size: calc(3vw + 2px);
/* 無效 👎 */
font-size: calc(3vw+2px);
/* 有效 👍 */
font-size: calc(3vw - 2px);
/* 無效 👎 */
font-size: calc(3vw-2px);
}
負(fù)數(shù)是可以的(例如calc(5vw - - 5px))，但這是一個例子，說明空白不僅是必需的，而且是有用的。
之所以需要在+和-之間設(shè)置間距，實際上是因為解析問題。例如，2px-3px被解析為數(shù)字“2”和單位“px-3px”，+還有其他問題，比如“被數(shù)字語法占用了”。我猜空白應(yīng)該與自定義屬性的- -語法有關(guān)，但不是！
乘法和除法不需要運(yùn)算符周圍的空格。但是我個人建議為了可讀性還是有必要加上
外部的空白無關(guān)緊要。我們甚至可以根據(jù)需要進(jìn)行換行：
.el {
/* Valid 👍 */
width: calc(
100% / 3
);
}
但是請注意這一點(diǎn)：calc和()括號之間沒有空格。
.el {
/* 無效👎 */
width: calc (100% / 3);
}
嵌套calc(calc())
.el {
width: calc(
calc(100% / 3)
-
calc(1rem * 2)
);
}
calc()里面嵌套的calc()是可以忽略掉的，因為它的父級是單獨(dú)工作的：
.el {
width: calc(
(100% / 3)
-
(1rem * 2)
);
}
在這種情況下，即使沒有括號，也會遵循數(shù)學(xué)中的加減乘除的“操作順序”規(guī)則。也就是說，除法和乘法首先發(fā)生(在加法和減法之前)，因此根本不需要括號?？梢赃@樣寫：
.el {
width: calc(100% / 3 - 1rem * 2);
}
如果我們確實需要先進(jìn)行加法或減法，則需要給它們加上必要的括號就可以啦。
.el {
width: calc(100% + 2rem / 2);
width: calc((100% + 2rem) / 2);
}
CSS自定義屬性和calc()使用
除了calc()混合單元的驚人功能外，接下來最令人驚訝的是calc()可將其與自定義屬性一起使用。自定義屬性可以在隨后的計算中使用：
html {
--spacing: 10px;
}
.module {
padding: calc(var(--spacing) * 2);
}
我敢肯定，你可以想象一個CSS設(shè)置，其中設(shè)置一堆CSS自定義屬性，然后讓其余的CSS根據(jù)需要使用它們，從而在頂部進(jìn)行大量配置。
自定義屬性也可以相互引用。下面是一個例子，其中使用了一些數(shù)學(xué)(注意，首先缺少calc()函數(shù))，然后再應(yīng)用。(它最終必須在calc()中。)
html {
--spacing: 10px;
--spacing-L: var(--spacing) * 2;
--spacing-XL: var(--spacing) * 3;
}
.module[data-spacing="XL"] {
padding: calc(var(--spacing-XL));
}
你可能不喜歡這樣，因為你需要記住calc()在哪里使用該屬性，但從可讀性的角度來看，這是可能的，而且可能很有趣。
自定義屬性可以來自HTML，這有時是一件非?？岷陀杏玫氖虑椤?/p>... ... ...
div {
/* 索引值來自HTML(帶有回退) */
animation-delay: calc(var(--index, 1) * 0.2s);
}
添加單位
如果你處于這樣一種情況：沒有單位的數(shù)字更容易存儲，或者提前用沒有單位的數(shù)字進(jìn)行數(shù)學(xué)運(yùn)算，你可以一直等到你應(yīng)用數(shù)字乘以1和單位來添加單位。
html {
--importantNumber: 2;
}
.el {
/* Number stays 2, but it has a unit now */
padding: calc(var(--importantNumber) * 1rem);
}
色彩值的使用
像RGB和HSL這樣的顏色格式有可以使用calc()處理的數(shù)字。例如，設(shè)置一些基本HSL值，然后更改它們以形成自己創(chuàng)建的系統(tǒng)(示例)：
html {
--H: 100;
--S: 100%;
--L: 50%;
}
.el {
background: hsl(
calc(var(--H) + 20),
calc(var(--S) - 10%),
calc(var(--L) + 30%)
)
}
不能將calc()和attr()合并
CSS中的attr()函數(shù)看起來很吸引人，就像你可以從HTML中提取屬性值并使用它們一樣。但是
...div {
/* 不行 */
color: attr(data-color);
}
這里沒有“類型”，所以attr()的唯一用途是與content屬性一起使用的字符串。這意味著這樣是有效的：
div::before {
content: attr(data-color);
}
我之所以提到這一點(diǎn)，是因為試圖以這種方式提取一個數(shù)字以用于計算可能會很有誘惑力，例如：
....grid {
display: grid;
/* 這兩項工作都沒有 */
grid-template-columns: repeat(attr(data-columns), 1fr);
grid-gap: calc(1rem * attr(data-gap));
}
幸運(yùn)的是，這并不重要，因為HTML中的自定義屬性同樣有用甚至更多！
....grid {
display: grid;
/* 好了! */
grid-template-columns: repeat(var(--columns), 1fr);
grid-gap: calc(var(--gap));
}
瀏覽器工具
瀏覽器開發(fā)工具會傾向于在樣式表中編寫calc()時向你顯示它。
如果需要計算出的值，可以使用“計算”??選項卡(在所有瀏覽器的DevTools中，至少是我所知道的)向你顯示。
瀏覽器支持
該瀏覽器支持?jǐn)?shù)據(jù)來自Caniuse，它具有更多詳細(xì)信息。數(shù)字表示瀏覽器支持該版本及更高版本的功能。
如果確實需要支持更早版本(例如IE 8或Firefox 3.6)，通常的技巧是在使用calc()以下屬性或值之前添加另一個屬性或值：
.el {
width: 92%; /* Fallback */
width: calc(100% - 2rem);
}
當(dāng)然也有很多已知的問題calc()，不過它們都是針對舊瀏覽器的。
Firefox <59不支持 calc() 顏色功能。范例： color: hsl(calc(60 * 2), 100%, 50%)。
當(dāng)IE 9 – 11 用于任何值box-shadow 時，將不會呈現(xiàn)該 屬性 calc()。
width: calc() 用在表格單元格上時，在IE 9-11和Edge都不支持
如果要將calc()用作包含視口單位等的流體類型情況下，請確保包含使用rem或em的單位，以便用戶仍然可以根據(jù)需要通過放大或縮小來控制字體的上下起伏。
總結(jié)
以上是生活随笔為你收集整理的css l数字相加,CSS calc()的完整指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css3 div跳动动画_CSS3实现闪
- 下一篇： 美妙的 CSS3 动画！一组梦幻般的按钮