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

總結

以上是生活随笔為你收集整理的CSS3之计算长度值------calc()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。