css calc()的作用是動態計算長度值，該函數允許我們在屬性值中執行數學操作，使用語法如“.foo { width: calc(100px 50px);}”，該語句表示指定一個元素寬的固定像素值為多個數值的總和。
建議：《css影片教學》
css3的calc() 函數用於動態計算長度值。
calc()函數允許我們在屬性值中執行數學運算。例如，我們可以使用 calc() 指定一個元素寬的固定像素值為多個數值的總和。
.foo { width: calc(100px + 50px);
}說明：
要注意的是，運算子前後都需要保留一個空格，例如：width: calc(100% - 10px);
任何長度值都可以使用calc()函數來計算；
#calc()函數支援" ", "-", "*", "/" 運算；
calc()函數使用標準的數學運算優先權規則；
為什麼是calc()
如果你使用過 css 預處理器，例如SASS，以上範例你或許碰到過
.foo {
width: 100px + 50px;
}
$width-one: 100px;
$width-two: 50px;
.bar {
width: $width-one + $width-two;
}然而，calc() 函數提供了更好的解決方案。首先，我們能夠組合不同的單元。特別是，我們可以混合計算絕對單位（例如百分比與視窗單元）與相對單位（例如像素）。例如，我們可以創造一個表達式，用一個百分比減掉一個像素值。
.foo { width: calc(100% - 50px);
}本例中，.foo 元素總是小於它父元素寬度 50px。
第二，使用 calc()，計算值是表達式它自己，而非表達式的結果。當使用 CSS 預處理器做數學運算時，給定值為表達式的結果。
.foo { width: 100px + 50px;
}.foo { width: 150px;
}然而，瀏覽器解析的 calc() 的值為真實的 calc() 表達式。
.foo { width: calc(100% - 50px);
}.foo { width: calc(100% - 50px);
}這表示瀏覽器中的值可以更靈活，能夠回應視口的改變。我們能夠為元素設定一個高度為視口的高度減去一個絕對值，它將隨視口的改變進行調整。
使用 calc()
calc() 函數可以用來對數值屬性執行四則運算。例如，
這裡有一些範例：
.foo { width: calc(50vmax + 3rem); padding: calc(1vw + 1em); transform: rotate( calc(1turn + 28deg) ); background: hsl(100, calc(3 * 20%), 40%); font-size: calc(50vw / 3);
}clac() 巢狀
calc() 函數可以巢狀。在函數裡邊，會被視為簡單的括號表達式，如下例所示。
.foo { width: calc( 100% / calc(100px * 2) );
}函數的計算值如下所示：
.foo { width: calc( 100% / (100px * 2) );
}降級方案
clac() 已被普遍支援。
對於不支援 calc() 的瀏覽器，整個屬性值表達式將被忽略。不過我們可以對那些不支援 calc() 的瀏覽器，使用一個固定值作為降級方案。
.foo { width: 90%;
width: calc(100% - 50px);
}vi設計http://www.maiqicn.com 辦公室資源網站大全https://www.wode007.com
什麼場景可以使用calc()
Example 1 - 居中元素
使用calc() 給我們另一個垂直居中元素的解決方案。如果我們知道元素的尺寸，一個典型的解決方案是使用負外邊距移動自身距離高與寬的一半，如下所示：
.foo { position: absolute
top: 50%; left: 50%; marging-top: -150px; margin-left: -150px;
}使用calc() 函數，我們僅僅透過top 與left 屬性便能達到相同的效果：
.foo { position: absolute
top: calc(50% - 150px); left: calc(50% - 150px);
}Flexbox 的介入，已經很少需要這種方法了。不過，有些情況下 Flexbox 不能被使用。例如，元素需要絕對定位或固定定位，這種方法是有用的。
Example 2 - 建立根柵格尺寸
使用 rem，calc() 函數能夠用來建立一個基於視窗的柵格。我們可以設定根元素的字體大小為視窗寬度的一部分。
html {
font-size: calc(100vw / 30);
}現在，1rem 為視窗寬度的 1/30。在頁面上的任何文本，將會根據你的視口自動縮放。更進一步，相同比例的視口總是會顯示相同的文字數量，不管視口的真實尺寸是多少。
如果我們對非文字使用 rem 設定大小，它們同樣遵守這個行為。一個 1rem 寬度的元素總是視口元素寬度的 1/30。
Example 3 - 清晰度
最後，calc()讓計算更清晰。如果你讓一組項目為它們父元素容器寬度的1/6，你可能這麼寫：
.foo { width: 16.666666667%;
}然而，它能夠更加清晰並具有可讀性：
.foo { width: calc(100% / 6);
}使用calc ()，我們還能做更多的事情，例如創建一個柵格系統。它是 CSS 最有用的新功能之一。
以上是css calc()有啥用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
