1. 首页
  2. 前端

在使用calc时无效问题的解决方式和注意事项

calc是css3新增的一个非常好用的属性,,具体的用法介绍可点击看这里calc。但是在使用过程中需要特别注意和以防采坑的地方,在这里对注意点进行整理:

1.calc不是一个标准的css属性,所以在calc前必须得加上浏览器的前缀做兼容,如下:

.elm {	
	-moz-calc(expression);	/*safari*/
	-webkit-calc(expression);	/*Standard  chrome */
	calc();
 }

2.在运算符号两端需要有空格,如果无空格,则会报错,但是函数calc和括号之间不能有空格,如下:

height: -webkit-calc(100vh  -  10px);

3.在less中使用时,要加上特殊符号,否则运算会出错,如下:

height: calc( ~"80% - 20px" )

更多关于calc的详细介绍和用法请阅读这里clac。

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/931

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code