四则运算calc()

说明

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

clac()是什么

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

calc()可以做什么

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

calc()运算规则

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

calc()浏览器兼容

如下图:

四则运算calc()_第1张图片
大家使用时,同样需要加上浏览器的前缀,不要留坑

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

示例

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

四则运算calc()_第2张图片
这个场景是头部有固定的高度,但是内容部分的是根据窗口的大小来的,这样我就能实现一个简单的动态布局

参考文献:css3参考手册

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

你可能感兴趣的:(四则运算calc())