立诚勿怠,格物致知
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

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

大前端WordPress主题 更专业 更方便

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

去看看

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

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册