calc()是css3新添加属性,它可以让你使用一个算术表达式来表达长度值,这意味着可以用它来定义div的宽度,并设置margin、padding、border等
- 可以使用”+”、”-”、”*”、”/”四则运算;
- 可以使用百分比、px、em、rem等单位;
- 可以混合使用各种单位进行计算。
浏览器兼容性:
- firefox 4.0+已经开支支持calc()功能,需要使用-moz-calc()私有属性;
- chrome从19 dev版,开始支持私有的-webkit-calc()写法;
- IE9支持原生写法,calc();
- Opera貌似还不支持~~
例子:
width: 90%;/*写给不支持calc()的浏览器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);