CSS calc函数的介绍和使用

一、介绍

calc()这个CSS函数允许在声明CSS属性值时执行一些计算。

/* property: calc(expression) */
width: calc(100% - 80px);

此 calc()函数用一个表达式作为它的参数,用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合,采用标准操作符处理法则的简单表达式。

  • +:加法。运算符两边必须要有空白字符。
  • -:减法。运算符两边必须要有空白字符。
  • *:乘法。乘数中至少有一个是数字。
  • /:除法。除数(/右边的数)必须是数字。

二、使用CSS变量嵌套使用calc()

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

在所有的变量都被展开后,widthC的值就会变成calc( calc( 100px / 2) / 2),然后,当它被赋值给.foowidth属性时,所有内部的这些calc()(无论嵌套的有多深)都将会直接被扁平化为一个括号,所以这个 width 属性的值就直接相当于calc( ( 100px / 2) / 2)了,或者说就变成25px了。 简而言之:一个calc()里面的calc()就仅仅相当于是一个括号

参考

Author: Yakima
关于作者:楠溪江人,出生于1991年,目前坐标上海。读书时代跳过级、保过送,工作后转过行。2013年本科毕业于北药。看书、码字、敲代码、打羽毛球是我花时间的爱好。曾在某上市药企任国际药品注册岗,现在某高新企业任前端管理岗。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据