CSS中的Calc（）是什麼（以及如何使用）

某些CSS功能功能強大，但很少使用，不是因為它們很困難，而是因為可以使用更容易的替代方案。 calc（）是其中之一。它非常有用，但經常被Clamp（）所掩蓋。

calc（）解決了一些佈局問題，這些問題無法觸摸。非常適合微調部分高度，調整粘性標頭，並在一條代碼線中混合柔性和固定單元。這是個好消息：您可以在不編寫一行代碼的情況下使用calc（）。

在Divi 5中，它構建在界面中，因此只需鍵入您的值，然後Divi處理其餘的。想看看如何？在這篇文章中，您將了解Calc（）的工作方式，在何處的幫助以及如何在Divi 5中使用它。

Divi 5已準備好在新網站上使用，但是請等一下，然後再遷移現有網站。

CSS中的calc（）是什麼？

calc（）是一個本機CSS函數，可讓您直接在樣式規則中執行簡單的數學（例如，添加，減去，乘和分割（取決於上下文））。它非常適合調整尺寸和間距，尤其是在混合固定和柔性的值以獲得更平滑的佈局而無需硬編碼時。

讓我們以一個例子理解這一點。假設您希望一個元素佔用屏幕的80％，但仍留出填充空間。您可以寫：

width: calc(80% - 40px);

這告訴瀏覽器通過從其80％的容器中減去40像素來動​​態計算寬度。當與自動邊緣之類的居中技術結合使用時，減去的剩餘空間均勻分佈。該值會根據屏幕尺寸自動調整。

乍一看，這似乎沒有開創性。但是Calc（）是解決日常佈局問題的理想選擇，例如在小屏幕上的間距破裂，元素重疊的固定標頭和偏心部分。在一行中，Calc（）通常足夠了，而不是冗長的媒體查詢。這是一些常見的單行用例：

• 填充：計算（5VW + 20px）;保持填充液。即使在小屏幕上，它也永遠不會降至20像素以下。
• 高度：計算（100VH - 80px）;當您擁有固定的標頭時，請保持內容可見。它根據屏幕高度自動調整。
• 寬度：計算（60％ - 1REM）；在保持一致的間距的同時，使您可以靈活地控制截面寬度。您可以使用邊緣左範圍（40％ + 0.5REM）之類的值來調整周圍邊緣；視覺中心或對齊其容器中的元素。

簡而言之，Calc（）消除了為每個斷點編寫額外CSS的必要性。您可以將邏輯直接構建到值中，並讓佈局自動響應。您不僅要定義大小，而且還決定要素應如何行為。

了解calc（）的工作方式

Calc（）的基本語法看起來像：

 calc(value operator value) 

在這裡，您可以使用任何有效的長度或值，並且操作員可以為 +， - ， *或 /。

例如，如果要將元素的寬度縮小40像素，則會寫入寬度：calc（100％ - 40px）;。注意使用％？這就是使寬度靈活的原因。

如果我們使用了計算（100px - 40px），則結果始終是60像素，即靜態。但是，通過使用百分比，我們讓瀏覽器根據屏幕或父元素計算大小。隨著佈局的變化，它會自動調整。

快速提示（也是一個常見的規則）：始終在值和操作員之間添加空間，以使Calc（）正常工作。沒有空間，CSS將無法正常工作。在下面，您會看到容器寬度已恢復為默認值，因為無空格的Calc（）函數不再有效：

使用多個單元

當您開始組合不同的相對單位時，您只是看到了Calc（）的真正好處。例如，帶有REMS的像素或視口寬度的百分比，因為那是您的佈局根據屏幕尺寸變化開始響應的時候。

為了更清楚，以下是一些有用的組合，可以嘗試查看它們在實際佈局中的工作方式。

您還可以將多個值和單元組合在一行中，這使尺寸響應的佈局更加準確。下面的此示例使用％，PX和REM來混合佈局縮放，固定間距和版式：

 width: calc(50% - 40px + 1rem); 

• 容器的50％尺度
• 40px像側邊欄一樣減去固定空間
• 1REM根據字體大小添加間距

嵌套計算功能

您還可以在另一個核對中嵌套一個calc（），以構建更複雜的佈局邏輯。這是反映您如何看待設計（一層）具有清晰關係的設計（一層）的好方法。例如，寬度：calc（200px - calc（100px + 2rem））;

在這裡，瀏覽器首先計算100px + 2REM ，該瀏覽器可以代表填充，邊距或其他元素的大小。然後，它從200px中減去總寬度。由於REM，寬度保持相對。

當您的佈局取決於多個因素時，這種嵌套會派上用場。您可以直接在CSS中寫下關係，而不是自己進行數學或硬編碼固定值。它可以使您的設計保持靈活性，稍後更易於更新。

您不需要經常嵌套的calc（），但是在處理分層間距或重疊元素時，它會有所幫助。也就是說，您可能想先從簡單的計算開始，因為它們會變得壓倒性。一旦您對它的工作方式感到滿意，增加複雜性就會感到自然。

當您有clamp（）時，為什麼要使用calc（）？

如果您經常使用clamp（），則可能會有這個問題。要獲得一個明確的答案，最好了解兩者之間的區別是一個好主意：

Clamp（）是現代的，因此在不依賴媒體查詢的情況下將其用於構建流體設計的興奮很容易。但是，即使clamp（）感覺更聰明，但在許多情況下，calc（）更相關，例如以下內容：

• 從柔性佈局中減去固定值：使用高度：calc（100VH - 80px）確保部分填充屏幕填充屏幕，以減去固定標頭的高度，因此元素不會重疊。 Clamp（）無法執行此操作，因為它不支持減法。
• 具有精度的偏移元素：諸如邊距左鍵的值：calc（50％ - 200px）;在保持視覺平衡的同時，將元素相對於其容器移動。 clamp（）無法執行這種關係定位。
• 並排對齊部分：幫助您創建響應式兩列佈局，其中一個具有寬度的列：calc（60％ - 2REM）；佔用空間的60％佔一致的差距。 clamp（）是縮放單個值的理想選擇，而當需要多個值之間的關係時，calc（）會出色。

總而言之，在定義單個值應如何擴展屏幕尺寸時，Clamp（）非常好。但是當您的佈局同時依賴多個事情時，您需要的是您需要的，例如上面的情況。

組合calc（） + clamp（）

雖然calc（）和clamp（）單獨使用功能強大，但當您可以將兩者結合時，為什麼要使用一個？您可以在clamp（）內嵌套calc（），以構建具有內置邏輯的流體設計，例如將柔性縮放與精確控制結合在一起。

例如，填充：夾具（1REM，calc（2vw + 10px），3REM）;創建在1REM和3REM之間縮放的間距，但是“首選”值基於Calc（）公式，該公式將視口寬度和固定值混合。

這為您提供了對設計的響應，合乎邏輯和精確的控制。一旦學習了何時使用calc（）和clamp（）單獨使用clamp（），何時將它們組合起來，則可以完全控制佈局而不依賴自定義斷點

將CSS變量與calc（）一起使用

您還可以通過CSS變量擴展Calc（）的靈活性。將變量與其他單元相結合，對其進行數學，並圍繞可重複使用的值構建佈​​局邏輯。例如，如果定義：root {–gap：40px;}，則使用填充：calc（var（–gap） + 1rem）;幫助您根據根值設置響應式填充。

注意：在Calc（）中使用CSS變量時，將變量包裹在Var（）周圍。看看我在上面的工作。

這使您可以使用一致的設計系統（您的CSS變量）構建一個完整的網站，同時仍然使用Calc（）具有精確的控制。而且，如果您想進行（全局）更改，例如在佈局上調整間距，則可以通過更改詞根值來完成。

對於夾具（），這並不容易。當Clamp（）支持CSS變量時，每個值必須解析為一個完整的有效單元。我的意思是什麼？

諸如夾具（1REM，var（–fluid-size），3REM）之類的函數僅在–Fluid-size解決到4VW之類的功能時起作用。而且，如果您需要使用一個變量進行數學（例如從中添加或減去），則需要將該部分包裝在Calc（）中。這些次要的事情在用變量構建動態值時，Calc（）至關重要。

Divi 5中的calc（）

Calc（）和Clamp（）都是高級CSS功能，可為您提供對佈局，間距和響應性的強大控制，但前提是您舒適地編寫代碼。這將它們用於開發人員或網絡專業人員。但是，那些喜歡視覺工作流並且仍然想在其設計中使用calc（）和clamp（）的人呢？你能這樣做嗎？

是的，你可以。在Divi 5中，calc（）和clamp（）均以高級單位提供，您不必編寫一行代碼即可與它們一起使用。

訂閱我們的YouTube頻道

您要做的就是直接在任何數字輸入字段中輸入calc（），僅此而已。

Divi Builder立即採取行動。輸入calc（）值後，設計時將獲得實時反饋。無需在建設者，DevTools或預覽之間切換，也無需猜測它的外觀。

Divi 5使建築物更聰明，更靈活地設計，而無需接觸代碼。您甚至可以將Calc（）與Divi的設計變量或您自己的CSS變量相結合，以創建可重複使用的動態佈局。我將向您展示如何在下一部分中做到這一點。

順便說一句，您知道Divi 5還支持高級單元中的所有CSS功能嗎？您可能也想了解它們

了解有關Divi 5的高級單位的所有信息

Divi 5如何使用calc（）輕鬆

您剛剛看到Divi 5在設計中毫不費力地使用Calc（）在您工作時即時預覽。但是還有更多。 Divi不僅提供了解決方法，還提供了一種完全集成的，無編碼的方法，可以使用相同的工具依靠開發人員依靠的相同的工具，而無需編寫代碼行。

以下是它如何幫助您在陰影中安靜地工作時英雄地使用calc（）：

1。將calc（）應用於任何數字字段

僅僅因為您沒有編碼並不意味著您有限。在Divi 5中，Calc（）在任何地方都可以接受數字值（思考：寬度，高度，填充，邊距，間隙，字體大小等）。如果字段接受一個數字，則支持calc（）。

並且應用calc（）相對簡單。您需要做的就是從其他高級單元中選擇Calc（）並輸入您的公式。

這意味著您可以在不離開構建器的情況下直觀地處理佈局數學。無論是減去固定的標頭高度，在字體尺寸中增加柔性間距，還是混合單元以提高響應能力，Divi可以讓您直接在設計字段內完成所有操作。

只需輸入您的公式，結果立即更新 - 沒有代碼面板，沒有選項卡開關，也沒有第二次猜測。它是完全控制的，直接構建在您的工作流程中。

2。獲取即時實時預覽

關於Divi 5中使用calc（）的最佳部分之一是您可以實時看到自己在做什麼。您不必猜測間距或對齊方式的外觀。當您輸入calc（）公式時，構建器會立即更新。

如您所見，當我輸入calc（）值時，填充物立即更改。我還在不同的斷點之間切換，向您展示填充如何根據屏幕尺寸進行調整。

無論您進行什麼更改，都會在輸入時看到結果。這種即時反饋可以幫助您了解計算如何影響佈局，並讓您在不切換選項卡的情況下快速調整值。

3。用calc（）構建高級工作流程

在Divi 5中使用calc（）並不強大，因為您現在可以添加或減去值。真正的優勢在於解鎖更聰明的工作流程。 Divi使您可以將Calc（）與clamp（），CSS變量，設計變量和選項組預設等高級工具相結合。

您不僅限於簡單的一次性調整。使用Divi，您可以創建對屏幕尺寸響應的佈局系統，遵循一致的間距規則，並在設計令牌更改時自動更新。讓我們看看如何：

1。用CSS變量擴展Calc（）

Divi 5直接在設計字段內部支持CSS變量，這意味著您可以定義可重複使用的值並在視覺上從它們中進行計算。假設我想在所有頁面部分上使用固定的填充物，因此我將其保存為CSS變量：

:root {
--section-padding: calc(4rem + 2vw);
}

為此，我將轉到頁面設置>高級>自定義CSS ，然後在此處添加我的根值：

現在，您可以在Divi內部的任何填充字段中使用VAR（– pection-padding），而不是輸入到處的完整公式。結果更新為實時，如果我以後更改根值，則整個佈局會立即反映出這種變化。

請注意，更新的高級單元顯示CAL VAR，這意味著使用Calc（）公式中的VAR（）函數插入CSS變量。

在Divi中使用CSS變量非常簡單。您只需在頁面本身上定義它們而無需觸摸樣式表即可。這有助於保持一致的設計框架，測試新值並構建響應式佈局規則。

2。在您的設計框架中使用calc（）

Divi 5使您可以將Calc（）值保存為設計變量，從而可以輕鬆地在整個網站上重複使用一個佈局邏輯。假設您希望您的服務部分始終填充屏幕，以減去固定標頭的高度。然後，您可以創建一個數字變量，並使用Value Calc（120VH - 30px）命名為“截面高度” 。

在這裡，30px是固定的標頭高度。

現在，要應用保存的變量，請轉到該部分的設計設置，然後懸停在高度上，以找到動態場圖標。單擊它，您保存的變量將彈出。單擊截面高度以應用它。

這種方法為您提供完整的佈局控制，同時保持設計一致。您沒有被鎖定為預設或靜態值。取而代之的是，您正在構建各個頁面，模板和屏幕大小的邏輯。

設計變量解鎖了很大的可能性。例如，您可以通過視覺構建設計框架，並在所有網站頁面上使用它，以使設計規則在整個過程中保持一致。我們還建議您在設計任何頁面之前構建排版，間距和尺寸系統。

3。創建並保存選項組預設

一旦佈局始終使用calc（）值，divi 5就使保存該邏輯以輕鬆使用。您可以將整個樣式設置（或單個設置（例如填充，間隙，邊距和寬度）作為選項組預設。這意味著您只需選擇一個預設，而不是重複應用calc（）公式，然後立即應用佈局數學。

例如，如果您使用了填充：跨多個部分的計算（4REM + 2VW），則無需在任何地方重新輸入它。只需將其保存為預設：

現在，在需要時應用您保存的預設。一切都在視覺上更新，因此您可以立即看到效果。

更好的是，如果您在這些預設中使用了設計變量，則可以稍後在全球更新這些值。更改變量一次，使用它的每個預設都會反映更新。這使大規模編輯快速，一致。

請注意，通過更改設計變量中的保存值，它們還會在填充部分中更新，同時還可以為我們提供實時預覽？那是因為我使用了“間距”部分預設內的截面高度變量。

那就是力量Divi 5帶來的。它可以幫助您擴展設計系統，同時在整個網站上保持高級佈局邏輯一致。一旦習慣了Calc（）等高級單元（請參見此處的更多Calc（）用例（）用例（有效地掌握）的提示）與Divi的模塊化設計系統，您將解鎖一種高效且有趣的構建網站的方式。

Divi使數學變得容易

您不必是開發人員即可使用Calc（）和Clamp（）之類的CSS功能。 Divi 5將這些高級工具帶入了易於探索，測試和應用的視覺界面。您可以在不編寫代碼行的情況下完成從簡單佈局調整到復雜設計系統的所有操作。

無論您是使用變量調整間距，還是構建可重複使用的預設，Divi都可以使每個人都可以訪問響應式設計數學。是否想測試Divi內部的Calc（）工作方式？立即下載Divi Public Alpha並親自體驗。

Divi 5已準備好在新網站上使用，但是請等一下，然後再遷移現有網站。