什么是 calc:
calc 是英文单词 calculate(计算) 的缩写, 是 CSS3 的一个新增的功能, 用来指定元素的长度. 可以使用 calc() 给元素的 border,margin,pading,font-size 和 width 等属性设置动态值.
calc() 可以解决问题:
元素宽度为 100% 时, 若再设置 margin,padding,border, 元素将会撑破父元素, 溢出. 虽然 CSS3 属性中的 box-sizing 在一定程度上可以解决这样的问题, 但是 calc() 函数功能实现该效果更简单.
calc() 能让元素做计算, 你可以给一个 div 元素, 使用百分比, em,px 和 rem 单位值计算出其宽度或者高度, 比如说 "width:calc(50% 2em)", 这样一来你就不用考虑元素 DIV 的宽度值到底是多少, 而把这个计算的任务交由浏览器去计算.
calc() 语法:
calc() 语法非常简单, 就像我们小时候学加 (+), 减 (-), 乘 (*), 除 (/) 一样, 使用数学表达式来表示:
- .elm {
- width: calc(expression);
- }
其中 "expression" 是一个表达式, 用来计算长度的表达式.
calc() 的运算规则:
calc() 使用通用的数学运算规则, 但是也提供更智能的功能:
使用 "+","-","*" 和 "/" 四则运算;
可以使用百分比, px,em,rem 等单位;
可以混合使用各种单位进行计算;
表达式中有 "+" 和 "-" 时, 其前后必须要有空格, 如 "widht: calc(12% 5em)" 这种没有空格的写法是错误的;
表达式中有 "*" 和 "/" 时, 其前后可以没有空格, 但建议留有空格.
浏览器的兼容性:
浏览器对 calc() 的兼容性还算不错, 在 IE9+,FF4.0+,Chrome19+,Safari6 + 都得到较好支持, 同样需要在其前面加上各浏览器厂商的识别符, 不过可惜的是, 移动端的浏览器还没仅有 "firefox for android 14.0" 支持, 其他的全军覆没.
来源: http://www.bubuko.com/infodetail-3078156.html