css中cacl函数的用法

calc() 是一个 CSS 函数，用于执行简单的数学计算，可以在 CSS 属性值中使用。它允许您在设置长度、宽度、位置等属性时执行加法、减法、乘法和除法操作。

calc() 的语法如下：

calc(expression);

• expression：表示计算表达式的字符串，可以包含长度、百分比、数值、操作符和括号。

以下是一些示例：

1. 设置宽度为固定长度减去另一个固定长度：

div {
  width: calc(100% - 20px);
}

上述示例中，width 属性的值将是父容器宽度减去 20px。

1. 设置高度为视口高度的一半：

div {
  height: calc(50vh);
}

上述示例中，height 属性的值将是视口高度的一半。

1. 设置元素的上边距和下边距之和为固定长度的两倍：

div {
  margin: calc(40px * 2) 0;
}

上述示例中，margin 属性的值将是上边距和下边距都为 40px。

calc() 函数支持加法（+）、减法（-）、乘法（*）和除法（/）操作，以及括号来控制计算的优先级。请注意，calc() 函数在一些旧版本的浏览器中可能不被完全支持，因此在使用时应谨慎考虑兼容性问题。