It's all about
connecting the dots

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()就仅仅相当于是一个括号

参考

赞(0) 打赏
版权声明:非商业用途转载请注明文章链接,商业用途转载请联系邮箱获取授权。
文章名称:《CSS calc函数的介绍和使用》
文章链接:https://www.orzzone.com/css-calc.html
商业联系:yakima.public@gmail.com
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏