介绍
calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态
的设置值。
语法
.element {
width:calc(expression);
}
运算法则
- 使用 “+”、"-"、"*" 和 “/” 运算
- 可以使用百分比、px、em、rem等单位运算
- 可以混合使用各种单位进行运算
- 表达式中有 “+” 和 “-” 时,其前后必须有空格。
- 表达式中有 “*” 和 “/” 时,其前后可以没有空格,但建议保留
兼容性
在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好的支持,使用时同样在其前面加上各浏览器厂商的识别符前缀。
.element {
-moz-calc(expression);
-webkit-calc(expression);
-o-calc(expression);
-ms-calc(expression);
calc(expression);
}
应用及示例
1、为什么要用calc()?
众所周知,如果元素的宽度为100%时,其自身不带其它盒模型属性设置还好,如果有别的类似margin、padding或border的属性设置,那将导致盒子被撑破。
为了解决撑破容器的问题,以前我们只能计算div.box的宽度,用容器的宽度减去padding和border的值 ,但有时候我们苦于不知道元素的总宽度,比如说是自适应布局,只知道一个百分比值,但其它的值又是*px之类的值,这就比较难解决了。
随着css3的出现,其中利用box-sizing来改变元素的盒模型以达到最终想要的效果,但是calc()解决此问题更加方便。
2、示例
.box {
background: #f4ede3;
height: 50px;
padding: 10px;
border: 5px solid green;
width: 90%; /*写给不支持calc()的浏览器*/
width: -moz-calc(100% - (10px + 5px) * 2);
width: -webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);
}