css3的calc() css3的百分比减宽,减高,加,乘,除，适合用于后台的排版定位

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

浏览器支持IE9+、FF4.0+、Chrome19+、Safari6+

calc()语法非常简单，就像我们小时候学加（+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.haorooms {
width: calc(expression);
}

这样padding和margin和百分比一起用，问题就可以解决了。

例如，我们margin是20px。那么我们就可以写成

.haorooms{
width: calc(100% - 20px); //注：减号前后要有空格，否则很可能不生效！！
}

也可以这么用：

.box {
background: #f60;
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);
}