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

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

#yyds干货盘点#CSS的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)
}
发表评论

相关文章