解释 CSS 中 calc()函数的工作原理

CSS calc()函数是一个内置函数，用于根据 CSS 属性执行计算。

calc()函数的工作： calc() 是一个内置的 CSS函数，目的是在指定 CSS 属性值的同时执行计算。它可以用于允许频率、长度、数量、时间等的地方。更具体地说， calc()函数用于提供值。

句法 ：

selector{
  property-name: calc(Expression)
}

参数： calc()函数接受一个强制的单参数表达式。传递的值必须包含数学表达式。

可以在表达式中使用的基本数学运算符如下。

• + :加法
• - ：减法
• * :乘法（一个操作数应该是一个数字）
• / ：除法（右手边需要是数字）

我们可以为表达式中的每个值使用不同的单位。

语法技术：

• 运算符将被空格包围。使用带有 (*) 和 (/) 的空格是可选的，但建议使用。像 calc(80% -10px) 会导致错误，正确的方法是 calc(80% – 10px)。
• 如果我们除以零，HTML 解析器会产生错误。
• calc() 的嵌套是允许的，内部的 calc() 可以简单地被视为一个括号。

工作： CSS 的calc()函数进行的计算是基于用户在计算过程中提供的值。如果未提供，则根据其父元素的值进行计算。

示例 1：在下面的示例中，容器的高度设置为视口高度的 100% 的 1/3，宽度设置为视口宽度的 80% 的 1/2。单位的确切值是未知的。我们使用calc()来为容器提供所需的高度和宽度。

HTML

  

    
    

  

    

        GeeksforGeeks
    

  

输出：

示例 2：在下面的示例中，我们有两个容器，一个父容器和它的子容器。父容器的高度和宽度的确切值是已知的。我们要计算相对于父容器的高度和宽度。因此，使用calc()可以轻松地为子容器指定所需的高度和宽度。

HTML

    
    

  

    

        
GeeksforGeeks
    
  

  

输出：