CSS3之計算長度值------calc()

calc()的使用

平時寫CSS時候可能遇到寬度或者高度需要計算的情況，簡單的時候，算算padding,margin就行了，機關或是px或是%。但是有時候需要複雜一點的，比如這次我需要計算（100vh - 50px）的值，那就需要calc()了。

calc()的運算規則

• 支援“+”、“-”、“*” 、“/”四則運算；
• 可以使用百分比、px、em、rem、vh、vm等機關；
• 可以混合使用各種機關進行計算；

書寫注意

• 表達式中有“+”和“-”時，其前後必須要有空格，如”widht: - calc(12%+5em)”這種沒有空格的寫法是錯誤的；
• 表達式中有“*”和“/”時，其前後可以沒有空格，但建議留有空格。
• 考慮相容性的話可以這樣寫：

/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
           

EX

.tablf {
    padding: px;
    height:vh;/*如果不支援calc就用這個啦*/
    overflow:auto;
    height:-moz-calc(vh - px);
    height:-webkit-calc(vh - px);
    height: calc(vh - px);
}