四则运算calc()

作者: 超爱吃小龙虾 | 来源:发表于2017-12-06 17:01 被阅读0次

说明

用于动态计算长度值。(需要注意的是,运算符前后都需要留一个空格,例如:calc(100% - 20px);)

clac()是什么

首先calc()是什么,calc是英文单词calculate(计算)的缩写。它在css3参考手册中,属于函数一栏,所以你可以把它理解为一个函数,括号里面是它的表达式。它可以计算任何的长度值。其次它是动态的计算的,所以不同单位之间的运算它也可以运算,例如:calc(10rem - 1px);

calc()可以做什么

理解了calc是什么,那么在什么情况下运用它,它能做到什么,就显而易见了,在流体布局中,其中一个元素有了长度,其中一个元素并没有固定的长度,他要根据窗口的大小,或者其他的因素需要计算此时的长度,它轻易的就能实现你的动态布局。

calc()运算规则

calc()函数支持'+'、'-'、'*'、'/'运算,其次,calc()函数使用标准的数学运算优先级规则,并且支持不同单位之间的运算,例如100%, rem, px。注意使用时,运算符'+'、'-'前后必须留空格,其他运算建议留空格。另外在react中,必须在表达式前加上"~"。例如calc: (~"100% - 10px");

calc()浏览器兼容

如下图:

大家使用时,同样需要加上浏览器的前缀,不要留坑

安卓UC浏览器不支持calc属性

示例

我出贴出我在实际项目中的样式,供大家参考

这个场景是头部有固定的高度,但是内容部分的是根据窗口的大小来的,这样我就能实现一个简单的动态布局

参考文献:css3参考手册

(第一次写这种文章,可能写得不够仔细,不够全面,如果有任何意见或者建议给我,我会继续完善它的,希望看到的人能够对你有所帮助)

相关文章

  • Calc的使用

    calc()= calc(四则运算) 常见用法:calc(50% - 10px) 需要注意的是,运算符前后都需要保...

  • calc使用

    1. calc基本使用 calc在css3中用于动态计算长度值,calc()中接受数学四则运算,运算的结果为计算后...

  • 四则运算calc()

    说明 用于动态计算长度值。(需要注意的是,运算符前后都需要留一个空格,例如:calc(100% - 20px);)...

  • css之calc()

    释义 calc()就是在CSS属性中运用四则运算的意思。它可以用在 width、height、border、mar...

  • Java利用栈实现四则运算计算器

    说明 本程序只实现了基本的四则运算,即加减乘除,不能有括号 本程序使用了基本的数据结构之一——栈 源代码 Calc...

  • 微信小程序 加法计算器

    1、新建目录calc2、pages加上"pages/calc/calc", 3、 calc.wxml

  • css3

    calc() 计算 width: calc(100% - 80px) heigth: calc(2em * 5) ...

  • 数据运算

    calc('+',1,2) // 3calc('-',1,2) // -2calc('*',2,3) // 6ca...

  • less下calc混合单位运算

    问题 在less中,使用calc(100% - 7px)或者calc(100% - 7rem)的结果都是calc(...

  • CSS3之calc()

    一、calc()是什么 calc是英文单词calculate(计算)的缩写,是css3新增的功能,calc() 函...

网友评论

    本文标题:四则运算calc()

    本文链接:https://www.haomeiwen.com/subject/kigkixtx.html