我們想要實現(xiàn)頁面自適應(yīng)布局時，通常因為margin的存在，而比較麻煩；有時候想要實現(xiàn)寬度自適應(yīng)的輸入框時，也因為padding或margin的存在，而相當(dāng)繁瑣，同時由于瀏覽器兼容性而導(dǎo)致最終效果不一致。css3新添加屬性box-sizing，在一定程度上解決了上面的問題，而在今天的文章中我們來通過css3新增加的另外一個屬性calc()來實現(xiàn)適應(yīng)布局。

calc()是css3新添加屬性，它可以讓你使用一個算術(shù)表達(dá)式來表達(dá)長度值，這意味著可以用它來定義div的寬度，并設(shè)置margin、padding、border等。
calc()的運算規(guī)則：
1.使用”+”、”-”、”*”、”/”四則運算；
2.可以使用百分比、px、em、rem等單位；
3.可以混合使用各種單位進(jìn)行計算。

用法
calc()語法非常簡單，就像我們小時候?qū)W加 （+）、減（-）、乘（*）、除（/）一樣，使用數(shù)學(xué)表達(dá)式來表示：

CSS Code復(fù)制內(nèi)容到剪貼板

.haorooms {   
  width: calc(expression);   
}  

這樣padding和margin和百分比一起用，問題就可以解決了。

例如，我們margin是20px。那么我們就可以寫成

CSS Code復(fù)制內(nèi)容到剪貼板

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

也可以這么用：

CSS Code復(fù)制內(nèi)容到剪貼板

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

示例
實例1：定位在頁面上的塊元素，含有外邊距

CSS Code復(fù)制內(nèi)容到剪貼板

.banner {   
  position:absolute;   
  left: 40px;   
  width: -moz-calc(100% – 80px);   
  width: -webkit-calc(100% – 80px);   
  width: calc(100% – 80px);   
  border: solid black 1px;   
  box-shadow: 1px 2px;