CSS3之計算長度值------calc()
阿新 • • 發佈:2019-01-02
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: 0px;
height:93vh;/*如果不支援calc就用這個啦*/
overflow:auto;
height:-moz-calc(100vh - 50px);
height:-webkit-calc(100vh - 50px);
height: calc(100vh - 50px);
}