CSS3之calc()

一、calc()是什么

calc是英文单词calculate(计算)的缩写，是css3新增的功能，calc() 函数用于动态计算长度值。

语法：calc(数学表达式)

语法规则：

• calc()函数使用标准的数学运算优先级规则，支持 +、-、*、 /四则运算；
• 可以使用百分比、px、em、rem等单位运算，也可以混合使用各种单位运算
• 注意：运算符前后都需要保留一个空格

二、浏览器兼容性

浏览器兼容性：需要添加兼容性前缀

示例：

width:-moz-calc(40% - 1px); 
width:-webkit-calc(40% - 1px); 
width:calc(40% - 1px);

三、使用示例

示例1：手机端一屏显示

使用说明：
（1）html和body需要同时定义高度100%；
（2）头部和底部定高，中间部分使用calc相减；

示例效果图1：

    
    
    
    
    


    

        这是header
    

    

        这是高度自动变化的区域
    

    

        这是footer
    

示例2：九宫格
示例效果图12：

    
    
    
    



    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9