css计算属性calc（）
介绍
calc()是css3的⼀个新增的功能，⽤来指定元素的长度，你可以使⽤calc()给元素的border、margin、pading、font-size和width等属
性动态的设置值。
语法
.element{
width：calc(expression);
}
运算法则
1. 使⽤ “+”、"-"、"*" 和 “/” 运算
2. 可以使⽤百分⽐、px、em、rem等单位运算
3. 可以混合使⽤各种单位进⾏运算
4. 表达式中有 “+” 和 “-” 时，其前后必须有空格。
5. 表达式中有 “*” 和 “/” 时，其前后可以没有空格，但建议保留
兼容性
在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好的⽀持，使⽤时同样在其前⾯加上各浏览器⼚商的识别符前缀。
.element{
-moz-calc(expression);
-webkit-calc(expression);
borderbox-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);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。