CSS3 的 calc() 属性自动计算动态的长度

发布于 2020-05-13阅读 266

CSS3 的 calc() 属性

1、calc()是css3的一个新增的功能，用来指定元素的长度，你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。

2、calc()语法

.box {
   width：calc(100% - 50px);  
 }

3、calc()的运算法则

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

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

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

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

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

属性