css3的calc() css3的百分比減寬,減高,加,乘,除，適合用於后台的排版定位

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);
}