calc()是css3新添加属性,它可以让你使用一个算术表达式来表达长度值,这意味着可以用它来定义div的宽度,并设置margin、padding、border等

    • 可以使用”+”、”-”、”*”、”/”四则运算;
    • 可以使用百分比、px、em、rem等单位;
    • 可以混合使用各种单位进行计算。

    浏览器兼容性:

    • firefox 4.0+已经开支支持calc()功能,需要使用-moz-calc()私有属性;
    • chrome从19 dev版,开始支持私有的-webkit-calc()写法;
    • IE9支持原生写法,calc();
    • Opera貌似还不支持~~

    例子:

    1. width: 90%;/*写给不支持calc()的浏览器*/
    2. width:-moz-calc(100% - (10px + 5px) * 2);
    3. width:-webkit-calc(100% - (10px + 5px) * 2);
    4. width: calc(100% - (10px + 5px) * 2);