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已准备好在新网站上使用，但是请等一下，然后再迁移现有网站。