calc函数真好用

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」

前言

最近接手的代码里经常能见到calc()函数的身影，今天就来再扩展学习一下这个函数。

calc函数基础

calc函数在任何支持length、frequency、angle、time、percentage、number、和integer数据类型的地方都可以使用，且支持4种运算：加、减、乘、除。

使用场景

在我们的项目中它是用来实现自适应布局效果的：
比如让元素宽度自适应：

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

又例如让3个列表以相同的宽度自适应100%的容器宽度：

.list{
    width: calc(100% / 3)
}

有时候还会用到clac函数的嵌套使用：

.list{
    width: calc(calc(100% - 20px) / 3)
}
// 等价于
.list{
    --size: calc(100% - 20px)
    width: calc(--size / 3)
}

calc函数的约束

有一次遇到这么一个情况，calc()函数用100%减去一个数值设置元素宽度不生效，后来发现calc()函数的运算符的书写是有一定的要求的，目前所知如下：

• calc() 加减
  • 加号和减号左右两边一定要有空格

  //这些都是不合法的，因为浏览器无法区分-20px和+20px是表示加减运算还是正数负数
  width: calc(100%-20px)
  width: calc(80%+20px)
  

  • 运算符前后带单位或者带百分号的值只能进行加减运算

  //这些都是不合法的
  width: calc(20px * 20px)
  width: calc(80% / 20px)
  

• calc() 乘除
  • 除法运算斜杠右边必须是不为0的数值类型

  //这些都是不合法的
  width: calc(200 / 20px)
  width: calc(100px / 0)
  

  • 乘法和除法两侧无须空格，但是为了格式一致，建议也使用空格

总结

这个函数的好处在于，只需要用它定义一个自定义属性，其它的CSS样式就会基于它进行构建，也只需要通过JavaScrip代码重置这个自定义属性，这个网页的样式效果就会随之而改变，就能大大降低实现成本和维护成本。