CSS3中的calc()

Posted 2021-04-09 静静的小心境

1、calc()是什么？

calc()就是css3的一个指定元素长度的属性，他的特殊之处在于他可以做计算，而且支持混合使用各种单位，比如%、px、em等。所以这个属性特别适用于那些自适应的布局。

2、calc()语法

  .element { width：calc(expression);}

3、calc()怎么用？

元素可以通过百分比、px等单位定义高宽，而calc()可以通过计算得出高宽。如下：

width: calc(100% - 10px);

 4、  calc()运算规则？

　  　1）、使用 "+"、"-"、"*" 和 "/" 运算

　　2）、可以使用百分比、px、em、rem等单位运算

　　3）、可以混合使用各种单位进行运算

　　4）、表达式中有 "+" 和 "-" 时，其前后必须有空格。

　　5）、表达式中有 "*" 和 "/" 时，其前后可以没有空格，但建议保留

5、浏览器的兼容性

　　在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好的支持，使用时同样在其前面加上各浏览器厂商的识别符前缀.

.element {

         -moz-calc(expression);

           -webkit-calc(expression); 

           -o-calc(expression);

           -ms-calc(expression);

           calc(expression);       

         }