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