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);

注:在符号(-)的两端都必须要有至少一个空格,函数calc和括号之间不能有空格,否则样式无效。

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

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

注:less中如果不加“~”,则会报错。

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

 

 

未经允许不得转载:码上小站 » 在使用calc时无效问题的解决方式和注意事项

发表评论

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

联系我们

在线咨询:在线咨询

邮件:1508488207@qq.com

QR code
隐藏
变装