您的位置:首页 > 代码 > HTML/CSS > CSS calc() 函数

CSS calc() 函数

admin 2020-11-12 19:06:42 363阅读 CSS calc 函数

calc()能做什么?

calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。

a

calc()语法

calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:


.elm {

  width: calc(expression);

}



其中"expression"是一个表达式,用来计算长度的表达式。

calc()的运算规则

calc()使用通用的数学运算规则,但是也提供更智能的功能:

1.使用“+”、“-”、“*” 和 “/”四则运算;

2.可以使用百分比、px、em、rem等单位;

3.可以混合使用各种单位进行计算;

4.表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;

5.表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

发表评论
  • 点击这里
评论列表
  • 尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?
    别来无恙 1970-01-01
  • 尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!尽管我也知道有时候确实很难好好去活着,
    路人甲 1970-01-01
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员
  • 尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!
    路人甲 1970-01-01
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复