CSS3 calc()

標籤：空格   混合   圖片   tps   alt   添加   需要   自己   運算子   

什麼是calc()?

    calc()是CSS3的一個新功能，能夠動態地計算長度值，任何長度值都可以使用calc()來計算。你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。

（在使用的時候應當注意運算子前後都應該保留空格，儘管*和/這兩個運算子並不需要保留空格，但是為了習慣最好加上。）

 

文法

    除了移動端的瀏覽器之外，目前大多數的瀏覽器都對calc()有較好的相容性，但是依舊要在前面添加首碼，例如：

 

相容性使用

    在calc()中，我們可以混合絕對單元與相對單元，比如：

 

結合相對於絕對單元的用法

    使用calc()時，計算值是運算式自己，而非運算式的結果，當使用CSS前置處理器做數學運算時，給定值為運算式的結果。

 

 

    然後瀏覽器解析的calc()的值為真實的calc()運算式

 

 

    我們可以使用calc()來實現元素的垂直置中

 

    而典型的解決方案是使用負外邊距移動自身距離高與寬的一半

 

 

    實際上calc()還有很多的實際用法，這裡只是舉一下例，歡迎補充

 

CSS3 calc()