CSS3: calc计算属性

前言
正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；
标准的写法：

  .class{
       /*
		 area: expression;
       */
	   width:calc();
	   padding:calc();
	   margin-top:calc();
	   ...
   }

兼容性

基本理论

• calc可以做用于任何具有大小的东东，比如border、margin、pading、font-size和width等属性设置动态值
• 支持的运算单位： rem , em , percentage , px
• 计算优先级别和数学一致

注意点:

calc 内部的表达式，在使用运算符号时，两遍必须加上空格（虽然乘除可以无视，但还是建议带上）！！！！！，不然会解析错误！！，看演示写法

	width:calc(10 * 10px);
	width:calc(50% - 50px);
	width:calc(50% + 5em);
	width:calc(10% / 1rem);

实战效果图
仅仅作为演示,响应伸缩