CSS calc()函数 - 芒果文档

📌 相关文章

📜 CSS calc()函数

📅 最后修改于: 2020-11-05 05:34:29 🧑 作者: Mango

CSS calc()

这是一个内置的CSS函数，允许我们执行计算。它可用于计算长度，百分比，时间，数字，整数频率或角度。它使用四个简单的算术运算运算符加(+)，乘(*)，减(-)和除(/)。

这是一个功能强大的CSS概念，因为它允许我们混合任何单位，例如百分比和像素。

句法

calc( Expression );

属性值

此CSS函数采用单个参数表达式，该数学表达式的结果将用作值。它可以是使用四个算术运算运算符(+，-，*，/)的任何简单表达式。该表达式是必须定义的。

重要事项

算术运算运算符加号(+)和减号(-)应该始终被空格包围。否则，该表达式将被视为无效表达式。例如， calc(60％-4px)将无效，因为它将被解析为百分比，然后是负长度。另一方面，表达式calc(60％-4px)将被解析为减法运算符和长度。
尽管运算符*和/不需要空格，但是为了保持一致性，建议添加它。
可以嵌套calc()函数。

Example1-简单的例子

在此示例中，我们使用calc()函数定义div元素的宽度和高度。带有相同单位的calc()函数表达式中有减法。

表达式的结果将被视为属性的值，因此width的值将为75％，height的值为275px。

 
 
     
         calc() function  
         
     
     
    
         
             Welcome to the javaTpoint.com  
             This is an example of calc() Function 
     width: calc(150% - 75%);  
              height: calc(350px - 75px);

在上面的示例中，我们可以直接提及height和width的值。尽管以上示例中的表达式具有相同的单位，但是当单位不同时会发生什么，那么将很难直接写入值。

现在，我们将看到另一个使用混合单位的演示。

例2-使用混合单位

 
 
     
         calc() function  
         
     
     
    
         
             Welcome to the javaTpoint.com  
             This is an example of calc() Function 
     width: calc(40% + 10em); 
              height: calc(350px + 75px);  
      padding-top: calc(10% - 10px);  
      padding-left: calc(10% + 10px);

让我们看看另一个示例，其中将使用嵌套的calc()函数。

Example3-嵌套的calc()函数

 
 
     
         calc() function  
         
     
     
    
         
             Welcome to the javaTpoint.com  
             This is an example of nested calc() Function 
     width: calc( calc(40em / 3) * 2); 
              height: calc(350px + 75px);