#yyds干货盘点#CSS的calc函数使用指南

在css布局中，指定盒子的width和height，有时会见到calc函数，那么calc是什么，怎么用，今天就为大家分析一下。

什么是calc()

calc是英文单词calculate(计算)的缩写；它是一个css3新增的功能，可以用来指定元素的长度，动态计算长度值。

calc的出现，开发者可以在css中执行计算。calc的好处是不同的长度单位可以混合使用，如百分比、px、em、rem等单位都可以混在一起使用。例如，我们可以创建一个表达式，它将从百分比值中减去像素值。

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

div的宽度等于父元素的内部宽度减去50px。

calc()的使用

calc()函数可以使用加、减、乘、除四则运算来进行属性计算，具体而言，它可以被使用在<length>，<frequency>，<angle>，<time>，<number>，<integer>等数据类型中。

div{
 width: calc(50vmax + 3rem);
 padding: calc(1vw + 1em);
 transform: rotate( calc(1turn + 28deg) );
}

记得要在“+”， “-”号左右要有空格，没有空格编辑器会报错。使用“*”和“/”时，其前后可以没有空格，但建议留有空格。而且除数不能是“0”。

还有一个要说的属性是calc可以嵌套使用，内部函数将被视为简单的括号表达式。

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

等价于

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