CSS3：calc() 属性用法

简介：

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。

calc()能给元素的做计算，可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说：width:calc(50% + 2em)

calc()的语法：

.elm {
    width: calc(expression);//其中"expression"是一个用来计算长度的表达式
}

calc()的运算规则：

1 使用“+”、“-”、“*” 和 “/”四则运算；

2 可以使用百分比、px、em、rem等单位；

3 可以混合使用各种单位进行计算；

4 表达式中有“+”和“-”时，其前后必须要有空格，如"widht:calc(12%+5em)"这种没有空格的写法是错误的；

5 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

注:使用时，注意查看浏览器兼容性

浏览器兼容性

例子1：

每个格子width随着浏览器的放大缩小而改变

    
        
        
        
        
    
    
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
            
10
            
11
            
12
            
13
            
14
            
15
            
16
        
    

例子2：

a1和a2之间、跟页面左右间隔都是30px，其宽度随着页面宽度而自适应

    
        
        
        
    
    
        

            
 a1 
            
 a 2