Skip to main content

calc 函数

calc函数用于动态计算长度值。

定义与用法​

width: calc(100% - 10px);

它可以被使用在<length>，<frequency>，<angle>，<time>，<number>，<integer>等数据类型中。

.demo {
  width: calc(50vmax + 3rem);

  padding: calc(1vw + 1em);

  transform: rotate(calc(1turn + 28deg));

  background: hsl(100, calc(3 * 20%), 40%);

  font-size: calc(50vw / 3);
}

注：

任何长度值都可以使用 calc()函数进行计算 calc()函数支持"+", "-", "\*", "/"运算,使用标准的数学运算优先级规则 使用“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； 使用“*”和“/”时，其前后可以没有空格，但建议留有空格。

calc 嵌套使用​

.demo {
  width: calc(100% / calc(100px * 2));
}

相当于：

.demo {
  width: calc(100% / (100px * 2));
}

示例：居中元素（假设.demo 盒子的高度和宽度都为 300px）​

.demo {

     position: absolute

     top: calc(50% - 150px);
     left: calc(50% - 150px);
}

这就相当于：

.demo {
  position: absolute;

  top: 50%;
  left: 50%;

  marging-top: -150px;
  margin-left: -150px;
}

calc()函数的兼容性​

calc() as CSS unit value 可以看出浏览器对于 calc()函数的支持度还是不错的。

而对于不支持的浏览器来说，calc()函数将会把整个表达式给忽略掉。这就意味着我们将必须提供一个静态值给不支持的浏览器使用。

.demo {
  width: 90%; /*非支持浏览器设置静态值*/

  width: calc(100% - 50px);
}

参考​