css 中的 calc() 函數用于動態計算值，允許將數學運算應用于長度、百分比等值，創建動態布局。它支持加、減、乘、除運算，并在所有主要瀏覽器中得到廣泛支持，使用方便。需要注意單位兼容性，避免過度使用以確保性能，并優先考慮 flexbox 和網格布局等響應式設計技術。
CSS 中 calc() 的用法
什么是 calc()？
calc() 是 CSS 中的一個函數，用于動態計算值。它允許您將數學運算應用于長度、百分比和其他 CSS 值，從而創建動態和響應式的布局。
calc() 的語法
<code>calc(<expression>)</expression></code>
登錄后復制
其中 是一個包含數學運算的字符串。
運算符
calc() 函數支持以下運算符：
+（加法）
-（減法）
*（乘法）
/（除法）
%（百分比）
（（括號）
使用示例
計算總寬度
<code>width: calc(100% - 20px);</code>
登錄后復制
計算行高
<code>line-height: calc(1.5em + 5px);</code>
登錄后復制
設置視口高度的 80%
<code>height: calc(80vh);</code>
登錄后復制
設置網格列寬的 50%
<code>grid-template-columns: repeat(2, calc(50% - 10px));</code>
登錄后復制
calc() 的優點
動態性和響應性：calc() 允許您創建根據視圖大小或其他因素調整其值的可變布局。
跨瀏覽器兼容性：calc() 在所有主要瀏覽器中都得到廣泛支持。
易于使用：calc() 語法簡單易懂，使得它成為非常方便的工具。
注意事項
確保表達式中使用的單位兼容。
過度使用 calc() 可能會影響性能。
始終優先考慮響應式設計技術，例如 flexbox 和網格布局。
