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

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

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

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表