calc()是CSS中的一個函式，它允許你在CSS屬性值中執行數學計算。它可以用來動態計算長度、角度、時間、數字或整數。這使得你可以建立更靈活和自適應的佈局，而無需依賴預定義的值或額外的JavaScript程式碼。
以下是calc()的主要用途和優勢：
-
混合不同單位：
calc()最強大的功能之一是它能夠混合不同的單位進行計算。例如，你可以將畫素和百分比值組合在一起，或者將em、rem和vh、vw單位組合在一起。 這在建立響應式佈局時特別有用。 例如：width: calc(100% - 20px); /* 元素寬度為父元素寬度的100% 減去 20px */ -
簡化計算：
calc()可以簡化CSS中的計算，避免手動計算值。例如，你可以使用calc()計算元素的寬度，而無需考慮邊距、填充和邊框的大小。 -
提高程式碼可讀性和可維護性： 使用
calc()可以使你的CSS程式碼更易於閱讀和理解，因為它清楚地表達了值的計算方式。 這也有助於提高程式碼的可維護性，因為你可以輕鬆地修改計算公式，而無需修改多個地方的程式碼。 -
動態計算：
calc()允許根據視口大小、父元素尺寸等因素動態計算值。 這使得你可以建立更靈活的佈局，可以適應不同的螢幕尺寸和裝置。
語法：
calc()函式的語法如下：
property: calc(expression);
其中property是CSS屬性，expression是一個數學表示式。 表示式可以使用以下運算子：
+加-減*乘 (注意：乘法運算子*與數字之間必須至少有一個空格)/除
示例：
-
寬度計算：
.container { width: calc(100% - 30px); } -
高度計算：
.element { height: calc(50vh + 100px); } -
字型大小計算：
.text { font-size: calc(1rem + 2px); } -
複雜計算：
.box { width: calc((100vw - 40px) / 3); }
注意事項：
- 運算子周圍的空格： 加法和減法運算子
+和-的兩側必須有空格。 乘法和除法運算子*和/也需要空格，特別是*必須用空格與數字隔開。 - 巢狀
calc()：calc()函式可以巢狀使用。 - 瀏覽器相容性：
calc()在現代瀏覽器中得到廣泛支援，但在一些舊版瀏覽器中可能需要使用polyfill。
總而言之，calc()是一個非常有用的CSS函式，它可以幫助你建立更動態、更靈活和更易於維護的佈局。 透過混合單位和執行計算，calc()為你提供了更大的控制權和靈活性，使你能夠建立更復雜的和響應式的設計。