CSS3中怎么實現calc()功能

今天就跟大家聊聊有關CSS3中怎么實現calc()功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

calc()是干嘛的？

calc()是單詞calculate(計算)的縮寫，是css3的一個新的長度單位功能，可以使用簡單的數學運算。

嗯，CSS3越來越高級了。
運算規則

calc()使用通用的數學運算規則，但是也提供更智能的功能：

    使用“+”“-”“*”“/”四則運算；
    可以使用百分比、px、em、rem等單位；
    可以混合使用各種單位進行計算。

實例：

我們來看幾個小例子來理解下calc()功能吧：

CSS Code復制內容到剪貼板

1. .box{ border:1px solid #ddd; width:calc(100%-2px) }  

容器寬度加上邊框寬度正好100%。

CSS Code復制內容到剪貼板

1. .box{ width:calc(10em+20px) }  

寬度，10em加20px。

CSS Code復制內容到剪貼板

1. .box{ margin-left:20px; width:calc(100%/3-20px); }    

2. .box:nth-child(3n){ margin-left:0; }  

3欄等寬布局。
瀏覽器支持

firefox 4.0+已經開支支持calc()功能，不過要使用-moz-calc()私有屬性，chrome從19 dev版，也開始支持私有的-webkit-calc()寫法，IE9這次則牛逼了一次，原生支持標準的不帶前綴的寫法了。Opera貌似還不支持～～

所以如果我們要用這個屬性的話，要記得帶上各瀏覽器的兼容性。

eric meyer提到w3c規范的一條備注(評論里面的同學也有提到)：

    Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces. via CSS3 Values and Units specification

也就是說，”+”、”-“兩個符號邊上必須要有空格，而”*”、”/”符號則不是必須的。

然后我們可能要這樣寫：

CSS Code復制內容到剪貼板

1. width: calc(100%/3 - 2*1em - 2*1px);  

這樣寫也是可以的：

CSS Code復制內容到剪貼板

1. width: calc(100% / 3 - 2 * 1em - 2 * 1px);  

但是這樣寫就是錯的：

CSS Code復制內容到剪貼板

1. width: calc(100%/3-2*1em-2*1px);  

看完上述內容，你們對CSS3中怎么實現calc()功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。