柚子快報(bào)邀請碼778899分享：前端 css3的calc()

http://yzkb.51969.com/

css3的calc()

MDN calc() https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

CSS3 的 calc() 函數(shù)是一個(gè)用于動(dòng)態(tài)計(jì)算表達(dá)式的工具。它允許你在 CSS 屬性值中執(zhí)行基本的數(shù)學(xué)運(yùn)算，從而可以創(chuàng)建響應(yīng)式的布局和設(shè)計(jì)。calc() 函數(shù)在處理不同單位和計(jì)算尺寸時(shí)特別有用，尤其是在流體布局和響應(yīng)式設(shè)計(jì)中。

例如

助記 calc是計(jì)算的意思, 是calculate的簡寫, compute也是計(jì)算, getComputedStyle(element) 獲取樣式的方法

clac():計(jì)算CSS(加減乘除各種高寬等) ; calculator:計(jì)算器getComputedStyle():計(jì)算元素的CSS,style , computer:計(jì)算機(jī)

MDN calc() https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

desktopmobile

Chrome

Edge

Firefox

Opera

Safari

Chrome Android

Firefox for Android

Opera Android

Safari on iOS

Samsung Internet

WebView Android

calc()

Full support

Chrome

26

more

Toggle history

Full support

Edge

12

Toggle history

Full support

Firefox

16

footnote

more

Toggle history

Full support

Opera

15

Toggle history

Full support

Safari

7

more

Toggle history

Full support

Chrome Android

28

Toggle history

Full support

Firefox for Android

16

footnote

more

Toggle history

Full support

Opera Android

14

Toggle history

Full support

Safari on iOS

7

more

Toggle history

Full support

Samsung Internet

1.5

Toggle history

Full support

WebView Android

37

more

Toggle history

Gradient color stops support

Full support

Chrome

19

Toggle history

Full support

Edge

12

Toggle history

Full support

Firefox

19

Toggle history

Full support

Opera

15

Toggle history

Full support

Safari

6

Toggle history

Full support

Chrome Android

28

Toggle history

Full support

Firefox for Android

19

Toggle history

Full support

Opera Android

15

Toggle history

Full support

Safari on iOS

6

Toggle history

Full support

Samsung Internet

1.5

Toggle history

Full support

WebView Android

37

Toggle history

Nested calc() support

Full support

Chrome

51

Toggle history

Full support

Edge

16

Toggle history

Full support

Firefox

48

Toggle history

Full support

Opera

38

Toggle history

Full support

Safari

11

Toggle history

Full support

Chrome Android

51

Toggle history

Full support

Firefox for Android

48

Toggle history

Full support

Opera Android

41

Toggle history

Full support

Safari on iOS

11

Toggle history

Full support

Samsung Internet

5.0

Toggle history

Full support

WebView Android

51

Toggle history

value support

Full support

Chrome

31

Toggle history

Full support

Edge

12

Toggle history

Full support

Firefox

48

Toggle history

Full support

Opera

18

Toggle history

Full support

Safari

6

Toggle history

Full support

Chrome Android

31

Toggle history

Full support

Firefox for Android

48

Toggle history

Full support

Opera Android

18

Toggle history

Full support

Safari on iOS

6

Toggle history

Full support

Samsung Internet

2.0

Toggle history

Full support

WebView Android

4.4.3

Toggle history

CSS3中的跨單位運(yùn)算函數(shù) calc()

calc()是英文單詞calculate(計(jì)算)的縮寫

是css3的一個(gè)新增的功能，calculate函數(shù)可跨單位進(jìn)行加減乘除計(jì)算，例如百分比和像素。還可以使用小括號建立運(yùn)算順序

它可以用在如下場合：、, 、、、或。

要注意的是：

1.乘法，乘數(shù)中至少要有一個(gè)是 類型的

2.除法，除數(shù)（/右面的數(shù)）必須是 類型的

3.用 0 作除數(shù)會(huì)讓 HTML 解析器拋出異常.

4.+ 和 - 運(yùn)算符的兩邊必須始終要有空白符。比如 calc(50% -8px) 會(huì)被解析成為一個(gè)無效的表達(dá)式：一個(gè)百分比后跟一個(gè)負(fù)數(shù)長度值。而 calc(8px + -50%) 會(huì)被解析成為一個(gè)長度后跟一個(gè)加號再跟一個(gè)負(fù)百分比。

5.* 和 / 運(yùn)算符不需要空白符，但考慮到統(tǒng)一性，仍然推薦加上空白符。

?6.涉及自動(dòng)和固定布局表中的表列，表列組，表行，表行組和表單元格的寬度和高度百分比的數(shù)學(xué)表達(dá)式可視為已指定auto。

基本語法

calc() 函數(shù)的基本語法如下：

width: calc(expression);

這里的 expression 是一個(gè)數(shù)學(xué)表達(dá)式，可以是加法、減法、乘法和除法。需要注意的是，calc() 函數(shù)中的加減運(yùn)算符周圍必須有空格，否則表達(dá)式將不會(huì)被正確解析。

示例

簡單的數(shù)學(xué)運(yùn)算： width: calc(100% - 20px); /* 寬度為容器寬度的100%減去20像素 */

height: calc(50vh + 10em); /* 高度為視口高度的50%加上10em */

混合單位： font-size: calc(1em + 1vw); /* 字體大小為1em加上視口寬度的1% */

padding: calc(5% + 10px); /* 內(nèi)邊距為容器寬度的5%加上10像素 */

在布局中使用： .container {

width: 100%;

max-width: 1200px;

margin: 0 auto;

padding-left: calc((100% - 1200px) / 2); /* 當(dāng)容器寬度小于1200px時(shí)，左側(cè)內(nèi)邊距會(huì)增加 */

padding-right: calc((100% - 1200px) / 2); /* 同理，右側(cè)內(nèi)邊距也會(huì)增加 */

}

注意事項(xiàng)

calc() 函數(shù)中的表達(dá)式必須被解析為一個(gè)有效的 CSS 長度、百分比、角度、時(shí)間、頻率或數(shù)字（取決于使用它的上下文）。在 calc() 函數(shù)中使用的數(shù)學(xué)運(yùn)算符（+、-、*、/）周圍必須有空格。乘法和除法具有更高的優(yōu)先級，但可以通過使用括號來改變計(jì)算順序。當(dāng)在 calc() 函數(shù)中使用百分比時(shí)，它是相對于包含塊的相應(yīng)維度（對于寬度是寬度，對于高度是高度）來計(jì)算的。當(dāng)在 calc() 中使用不同單位時(shí)，必須至少有一個(gè)邊或值具有相對單位（如百分比、視口單位等），因?yàn)?CSS 無法在純粹的絕對單位（如像素與毫米）之間進(jìn)行數(shù)學(xué)運(yùn)算。在一些舊的瀏覽器版本中，可能需要添加瀏覽器前綴（如 -webkit-calc()），但在現(xiàn)代瀏覽器中，calc() 已經(jīng)是標(biāo)準(zhǔn)且不需要前綴了。

CSS3 的 calc() 函數(shù)是一個(gè)非常有用的工具，允許你進(jìn)行動(dòng)態(tài)的長度計(jì)算。通過這個(gè)函數(shù)，你可以在樣式中使用數(shù)學(xué)表達(dá)式來調(diào)整元素的大小、位置等屬性。

語法

property: calc(expression);

其中，property 是你想要調(diào)整的 CSS 屬性，如 width、height、margin、padding 等。expression 是一個(gè)數(shù)學(xué)表達(dá)式，可以使用加法、減法、乘法、除法等基本算術(shù)操作符。

示例

動(dòng)態(tài)寬度：你可以使用 calc() 來根據(jù)窗口大小動(dòng)態(tài)調(diào)整元素的寬度。

div {

width: calc(100% - 20px);

}

動(dòng)態(tài)邊距：你可以根據(jù)元素的大小動(dòng)態(tài)調(diào)整邊距。

div {

margin-left: calc(50% - 10px);

}

動(dòng)態(tài)邊框?qū)挾龋焊鶕?jù)元素的大小動(dòng)態(tài)調(diào)整邊框?qū)挾取?/p>

div {

border-width: calc(1px * ((100vw - 500px) / 2));

}

動(dòng)態(tài)內(nèi)邊距：根據(jù)元素的大小動(dòng)態(tài)調(diào)整內(nèi)邊距。

div {

padding: calc(10px + 5%);

}

動(dòng)態(tài)字體大?。焊鶕?jù)視口寬度動(dòng)態(tài)調(diào)整字體大小。

h1 {

font-size: calc(1em + 2vw);

}

注意點(diǎn)

calc() 表達(dá)式中的單位必須清晰，例如不能出現(xiàn)像 calc(10px + 5em) 這樣的表達(dá)式。單位必須在整個(gè)表達(dá)式之前或者之后明確。正確的形式應(yīng)該是 calc(10px + 5em) 或 calc((10px + 5em) / 2)。當(dāng)使用 calc() 時(shí)，瀏覽器會(huì)進(jìn)行值解析和計(jì)算，這可能會(huì)導(dǎo)致性能影響，特別是在移動(dòng)設(shè)備上。因此，當(dāng)可能時(shí)，盡量減少使用復(fù)雜的表達(dá)式或避免使用 calc()。

CSS3的calc()函數(shù)是用來設(shè)置元素的動(dòng)態(tài)屬性值的。它可以在CSS中進(jìn)行數(shù)學(xué)運(yùn)算，例如加法、減法、乘法和除法，以便根據(jù)不同的條件來計(jì)算元素的屬性值。

以下是兩個(gè)使用calc()函數(shù)的例子：

為頭部添加自適應(yīng)的寬度和內(nèi)邊距：

#header {

background: #f60;

padding: 20px;

width: 984px; /* Fallback for browsers that don't support the calc() function */

width: -moz-calc(100% - 40px);

width: -webkit-calc(100% - 40px);

width: calc(100% - 40px);

}

在這個(gè)例子中，元素的寬度被設(shè)置為984px，但是如果瀏覽器支持calc()函數(shù)，它會(huì)根據(jù)父元素的寬度減去40px來計(jì)算寬度。

為主內(nèi)容添加左浮動(dòng)和自適應(yīng)的寬度：

#main {

border: 8px solid #B8C172;

float: left;

margin-bottom: 20px;

margin-right: 20px;

padding: 20px;

width: 704px; /* Fallback for browsers that don't support the calc() function */

width: -moz-calc(75% - 20px * 2 - 8px * 2);

width: -webkit-calc(75% - 20px * 2 - 8px * 2);

width: calc(75% - 20px * 2 - 8px * 2);

}

在這個(gè)例子中，元素的寬度被設(shè)置為704px，但是如果瀏覽器支持calc()函數(shù)，它會(huì)根據(jù)父元素的寬度減去一些邊距和邊框的寬度來計(jì)算寬度。

CSS3的calc()函數(shù)是一個(gè)強(qiáng)大的工具，它允許在CSS屬性值中進(jìn)行數(shù)學(xué)計(jì)算。使用calc()，你可以動(dòng)態(tài)地計(jì)算長度值，從而更容易地實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)和復(fù)雜的布局。

基本語法

calc()函數(shù)的基本語法如下：

property: calc(expression);

這里的property是你想要設(shè)置的CSS屬性，而expression是一個(gè)數(shù)學(xué)表達(dá)式，可以包含加法(+)、減法(-)、乘法(*)和除法(/)運(yùn)算。

示例

簡單的數(shù)學(xué)運(yùn)算：

假設(shè)你想要一個(gè)元素的寬度是其父元素寬度的一半，你可以這樣寫：

.element {

width: calc(50% - 0px);

}

雖然在這個(gè)例子中減去0看起來是多余的，但calc()函數(shù)允許你進(jìn)行任何數(shù)學(xué)運(yùn)算，包括減去一個(gè)值。

使用像素值和百分比：

你可以在同一表達(dá)式中混合使用像素值和百分比：

.element {

padding: calc(10px + 5%);

}

這將元素的內(nèi)邊距設(shè)置為10像素加上父元素寬度的5%。

使用加法進(jìn)行邊距調(diào)整：

假設(shè)你有一個(gè)固定的左邊距，并想根據(jù)視口寬度動(dòng)態(tài)調(diào)整右邊距以保持總寬度不變：

.container {

width: 100%;

margin-left: 50px;

margin-right: calc(100% - 100% - 50px);

}

在這個(gè)例子中，calc()用于計(jì)算右邊距，以確保容器總寬度等于視口寬度，即使左邊距是固定的。

使用min()和max()函數(shù)：

calc()還可以與min()和max()函數(shù)結(jié)合使用，以設(shè)置屬性的最小值和最大值。例如，你可以限制一個(gè)元素的最小寬度：

.element {

min-width: calc(100% - 200px);

}

這將確保元素的寬度至少是其父元素寬度減去200像素。

注意事項(xiàng)

運(yùn)算符和空格：在calc()中，運(yùn)算符兩邊必須有空格，否則表達(dá)式可能不會(huì)被正確解析。例如，calc(50%-10px)是無效的，而calc(50% - 10px)是有效的。瀏覽器兼容性：雖然現(xiàn)代瀏覽器普遍支持calc()，但在一些較舊的瀏覽器中可能不受支持。在使用calc()時(shí)，最好檢查你的目標(biāo)瀏覽器的兼容性?；赝朔桨福簩τ诓恢С謈alc()的瀏覽器，你可以提供一個(gè)回退值，但請注意，這不是一個(gè)完美的解決方案，因?yàn)榛赝酥悼赡懿贿m用于所有情況。性能考慮：雖然calc()通常不會(huì)對性能產(chǎn)生顯著影響，但在復(fù)雜的布局中過度使用它可能會(huì)導(dǎo)致性能下降。因此，建議僅在必要時(shí)使用calc()。

英文單詞-計(jì)算:Calculate與Compute的區(qū)別是什么

compute 源自法語；calculate 源自拉丁語。在使用上，calculate 使用得更為廣泛 calculate側(cè)重人的分析，而compute側(cè)重機(jī)器的運(yùn)算。 calculator是“計(jì)算器”，而computer是“計(jì)算機(jī)”

英文單詞“Calculate”與“Compute”在含義和用法上存在一些微妙的區(qū)別。

首先，從詞性的角度來看，“Compute”既可以作動(dòng)詞，也可以作名詞，而“Calculate”則只能作動(dòng)詞。不過，當(dāng)它們都作為動(dòng)詞使用時(shí)，兩者都表示“計(jì)算”。

其次，從側(cè)重點(diǎn)上來看，“Calculate”更偏向于指要求細(xì)致精確和復(fù)雜的計(jì)算，以解決疑難問題，多用于自然科學(xué)、生產(chǎn)部門或要求專門計(jì)算的場合。它通常涉及更為復(fù)雜的運(yùn)算或預(yù)測，需要使用特定的方法或公式。而“Compute”則更偏向于指簡單的數(shù)理運(yùn)算，或者是由機(jī)器處理的、能夠用規(guī)則式的流程去大規(guī)模計(jì)算的場景。它通常與計(jì)算機(jī)或電子設(shè)備的使用緊密相關(guān)，強(qiáng)調(diào)利用技術(shù)手段進(jìn)行計(jì)算。

此外，“Calculate”和“Compute”在詞源上也有所不同。“Calculate”源自拉丁語，而“Compute”則源自法語。這可能也反映了它們在用法和語境上的一些差異。

“Calculate”和“Compute”這兩個(gè)英文單詞在表示“計(jì)算”時(shí)，主要有以下幾方面的區(qū)別：

詞性不同：“Compute”既可以作動(dòng)詞也可以作名詞，而“Calculate”則主要作動(dòng)詞使用。側(cè)重點(diǎn)不同：“Calculate”更側(cè)重于指要求細(xì)致精確和復(fù)雜的計(jì)算，以解決疑難問題，多用于自然科學(xué)、生產(chǎn)部門或要求專門計(jì)算的場合。它可能涉及更為復(fù)雜的運(yùn)算或預(yù)測，需要使用特定的方法或公式。相對地，“Compute”則更偏向于簡單的數(shù)理運(yùn)算，或者用于描述可以由機(jī)器處理、能夠用規(guī)則式流程去大規(guī)模計(jì)算的場景。它經(jīng)常與計(jì)算機(jī)或電子設(shè)備的使用緊密相關(guān)，強(qiáng)調(diào)利用技術(shù)手段進(jìn)行計(jì)算。使用語境不同：“Calculate”在某些情況下可以表示“估算”，含有一定的預(yù)測或推測成分，而“Compute”則更傾向于表示一種程式化、規(guī)則化的計(jì)算過程。因此，“Calculate”可能更常用于需要人類思考和分析的復(fù)雜計(jì)算場景，而“Compute”則更適用于可以由機(jī)器自動(dòng)完成的計(jì)算任務(wù)。

Calculate與Compute的區(qū)別是什么

在英文中，calculate和compute都有“計(jì)算”的意思，calculator是“計(jì)算器”，而computer是“計(jì)算機(jī)”，二者非常相似。但是，你是否知道它們的“計(jì)算”是有區(qū)別的呢？又如何正確使用它們呢？

Calculate與Compute的定義

了解一個(gè)英語單詞，首先要看它在詞典中的定義。我們來看一下calculate和compute在劍橋詞典中的定義是什么：

|?Calculate: to judge the number or amount of something by using the information that you already have, and adding, taking away, multiplying, or dividing numbers.

|?Compute: to calculate an answer or amount by using a machine.

從上面的定義來看，calculate和compute都是計(jì)算某個(gè)事物的數(shù)量、總量，不過從方法來看，calculate沒有限定是用什么方法，但compute往往是用機(jī)器得到結(jié)果。但是在方法這個(gè)層面也不是一定的，所以在大多數(shù)情況下，二者都可以互換。

比如，下面的幾個(gè)例子中calculate和compute可以互換：

|?Compute/Calculate the ratio of the object's height to its weight. 計(jì)算一下物體的長寬比

|?We tried to calculate/compute how fast he was moving when the car crashed. 我們努力計(jì)算當(dāng)汽車撞車時(shí)他移動(dòng)得多快。

| The government uses the household survey to calculate/compute the monthly unemployment rate. 政府利用家庭調(diào)查來計(jì)算每月的失業(yè)率。

從上面的例子可以看到，涉及一般的、簡單的數(shù)學(xué)運(yùn)算時(shí)，二者是完全等價(jià)的。所以說在數(shù)學(xué)論文、計(jì)算機(jī)論文上，我們一般可以看到二者是混用的。

Calculate與Compute的區(qū)別

盡管大多數(shù)情況下二者等價(jià)，但也有一些比較特殊的場景是尤其要注意區(qū)分的，這主要體現(xiàn)在它們的側(cè)重點(diǎn)不同。calculate更偏向于不能用規(guī)則描述、計(jì)算，涉及較為復(fù)雜的人類思考的場景；而compute更偏向可以由機(jī)器處理的，能夠用規(guī)則式的流程去大規(guī)模計(jì)算的場景。

比如，下面的例子calculate和compute一般就不能互換：

在這個(gè)意義上，calculate更像是“估算”，而compute就是程式化的計(jì)算，這是二者最大的不同?；蛘哒f，calculate側(cè)重人的分析，而compute側(cè)重機(jī)器的運(yùn)算。

calculator是“計(jì)算器”，而computer是“計(jì)算機(jī)”

在英語中，“calculator”和“computer”的區(qū)別主要體現(xiàn)在功能和復(fù)雜性上。

“calculator”指的是計(jì)算器，它是一種用于進(jìn)行數(shù)學(xué)運(yùn)算的電子設(shè)備。計(jì)算器通常具有基本的加減乘除等功能，有些高級的計(jì)算器還可以進(jìn)行更復(fù)雜的數(shù)學(xué)和科學(xué)計(jì)算。但它的功能相對較為有限，主要用于執(zhí)行特定的計(jì)算任務(wù)。

而“computer”則指的是計(jì)算機(jī)，它是一種功能更為強(qiáng)大和復(fù)雜的電子設(shè)備。計(jì)算機(jī)不僅可以進(jìn)行各種數(shù)學(xué)運(yùn)算，還可以處理各種類型的數(shù)據(jù)，運(yùn)行各種軟件應(yīng)用程序，存儲(chǔ)和檢索信息，以及與其他計(jì)算機(jī)進(jìn)行網(wǎng)絡(luò)通信等。計(jì)算機(jī)具有更廣泛的功能和用途，可以滿足人們在各種領(lǐng)域的需求。

此外，從詞源上來看，“calculator”源自拉丁語，而“computer”則是在英語中創(chuàng)造的詞。這也反映了兩者在功能和用途上的不同。

總的來說，“calculator”和“computer”在功能和復(fù)雜性上存在明顯的區(qū)別。計(jì)算器主要用于執(zhí)行數(shù)學(xué)運(yùn)算，而計(jì)算機(jī)則具有更廣泛的功能和用途，可以滿足人們在各種領(lǐng)域的需求。

calculate相關(guān)

“calculate”是一個(gè)英語動(dòng)詞，其基本含義是進(jìn)行數(shù)學(xué)計(jì)算或估算。它通常用于描述對數(shù)值、數(shù)據(jù)或結(jié)果進(jìn)行慎重、準(zhǔn)確的運(yùn)算或預(yù)測。除了基本的計(jì)算意義外，“calculate”還可以表示計(jì)劃、打算或預(yù)測未來的事件或趨勢。

與“calculate”相關(guān)的詞匯包括“calculation”（計(jì)算、估算）、“calculator”（計(jì)算器）以及“computed”（計(jì)算得到的）。此外，“calculate”也常與其他詞匯搭配使用，如“calculate the cost”（計(jì)算成本）、“calculate the probability”（計(jì)算概率）等。

在計(jì)算機(jī)科學(xué)領(lǐng)域，“calculate”也常用于描述計(jì)算機(jī)程序中的計(jì)算操作。例如，在編程語言中，可以使用各種函數(shù)和算法來進(jìn)行計(jì)算，并將結(jié)果存儲(chǔ)在變量中。這些計(jì)算可能涉及簡單的數(shù)學(xué)運(yùn)算，也可能涉及更復(fù)雜的統(tǒng)計(jì)分析、模擬預(yù)測等。

此外，“calculate”還可以與其他詞綴組合形成新的詞匯，如“calculable”（可計(jì)算的）、“calculative”（計(jì)算的、精明的）等。這些派生詞在特定的語境中可能具有不同的含義和用法。

css的calc()

在css中, calculate的簡寫calc是一個(gè)函數(shù)calc() 用法如:

width: calc(100% - 80px);

可參考 calc() - https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

compute相關(guān)

柚子快報(bào)邀請碼778899分享：前端 css3的calc()

http://yzkb.51969.com/

精彩文章