CSS calc() 函数

大家好，今天我将讨论 CSS 中的 calc() 函数。

有时我们必须为属性提供数值，并且需要一种可以帮助我们创建恒定方式来应用该数值的方程，并且您不必每次都手动设置值，如果有变化价值观。
示例 — 假设您创建了 3 个元素并将它们设置为 inline-block 并希望它们的宽度相等，并且它们之间有 30px 的空间，并且还希望这些元素使用父容器的整个宽度，那么您可能会认为提供元素的宽度与这些元素相等，但每当容器宽度发生变化时，您必须更改这些元素的宽度以将它们保持在一行中。您将需要一些可以为您完成工作的东西。
calc() 函数为您执行此操作，它可用于创建一些为您完成数学部分的方程。

示例 - 创建等宽的元素

 <div class="container">  
 <div class="child-element">第一的</div>  
 <div class="child-element">第二</div>  
 <div class="child-element">第三</div>  
 </div>

CSS——

 * {  
 填充：0；  
 边距：0；  
 } 。容器 {  
 字体大小：0；  
 } .子元素{  
 宽度：计算（（100％ - 60px）/ 3）；  
 高度：300px；  
 背景颜色：深红色；  
 显示：内联块；  
 白颜色;  
 文本对齐：居中；  
 填充：2rem；  
 字体大小：20px；  
 } .child-element:nth-child(2) {  
 边距：0 30px；  
 }

输出 -

如您所见，我们有 3 个子元素，我们使用 calc() 函数为所有子元素提供了相等的宽度。
(100% — 60px) / 3，这意味着元素的宽度将是 100% — 60px（60 px 由于第二个元素的左右边距需要 60px ，30left + 30right = 60 ），然后我们将它除以 3 取1/3 空间均等。
在容器中，我们给定了 font-size:0，以抵消由于 inline-block 属性而创建的间距。

感谢您查看这篇文章

你可以联系我——
Instagram — https://www.instagram.com/supremacism__shubh/
领英—— https://www.linkedin.com/in/shubham-tiwari-b7544b193/
电子邮件 - [email protected]