CSS3 计算函数 calc()

发表于 | 分类于 | 阅读次数:

在 CSS var() 中有出现过 calc() 函数用于计算。这里会详细说一下 calc() 到底是什么。

calc() 是什么

calc() 是 CSS 里可以混用多种不同的长度单位计算的表达式。有了这个表达式，再加上 var()函数，CSS 操作起来也是溜溜的。

  • 语法：property: calc(expression) 解释一下就是 CSS 属性：calc(数学表达式);

  • 支持的运算符号：+、-、*(乘数中至少要有一个是 <number> 类型的值)、/(除号)并小括号来调整计算顺序。

需要主意 :

用 0 作除数会让 HTML 解析器抛出异常⚠️.
1
2
3
div{
  height: calc(1px / 0); /* 解析异常出现警告 */
}
+ 和 - 运算符的两边必须始终要有空白符。
* 和 / 运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。

比如：

1
2
3
div{
  width: calc(100% -80px); /* 解析异常出现警告 */
}

使用

  • 兼容不支持 calc() 的浏览器:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .banner {
        position: absolute;
    /* 兼容不支持 `calc()` 的浏览器 */
        left: 5%;
        width: 90%;
    /* 针对支持 `calc()` 的浏览器会覆盖上面的属性 */
        left: calc(40px);
        width: calc(100% - 80px);
        border: 1px solid black;
        box-shadow: 1px 2px;
        background-color: yellow;
        padding: 6px;
        text-align: center;
    }

  • 使用 CSS 变量嵌套 calc():

    1
    2
    3
    4
    5
    6
    .foo {
      --widthA: 100px;
      --widthB: calc(var(--widthA) / 2);
      --widthC: calc(var(--widthB) / 2);
      width: var(--widthC);
    }

  • 用 () 来调整计算顺序

    1
    2
    3
    4
    div{
      --heightA: 10px;
      height: calc(3 * (var(--heightA) + 10px));/* 输出 60px */
    }

-