1
      
    
      
       2
      
    
      
       3
      
    
      
       4
      
    
      
       5
      
    
      
       6
      
    
      
       7
      
    
      
       8
      
    
      
       9
      
     

九宫格效果图：

 

      在绘制过程中主要用到的是css中的calc()，下面针对calc()做一下简单介绍：

calc()

1.支持%、rem、em、px等单位的四则运算

2.“+”、“-”运算注意要留有空格

3.“*”、“/”运算可以不留空格

兼容性处理:

-moz-calc(expression)     兼容firefox

-webkit-calc(expression)   兼容chrome/safari