原來css也可以計算 calc 使用

什麼是calc:

calc是英文單詞calculate(計算)的縮寫，是css3的乙個新增的功能，用來指定元素的長度。可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值。

calc()可以解決問題：

元素寬度為100%時，若再設定margin、padding、border，元素將會撐破父元素，溢位。雖然css3屬性中的box-sizing在一定程度上可以解決這樣的問題，但是calc()函式功能實現該效果更簡單。

calc()能讓元素做計算，你可以給乙個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說「width:calc(50% + 2em)」，這樣一來你就不用考慮元素div的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。

科普一下box-siziing：

box-sizing屬性值可以為這三個值之一：content-box（default），border-box，padding-box。

content-box，border和padding不計算入width之內

padding-box，padding計算入width內

border-box，border和padding計算入width之內，其實就是怪異模式了~

ie8+瀏覽器支援content-box和border-box；ff則支援全部三個值。

calc()語法：

calc()語法非常簡單，就像我們小時候學加（+）、減（-）、乘（*）、除（/）一樣，使用數學表示式來表示：

.elm

其中"expression"是乙個表示式，用來計算長度的表示式。

calc()的運算規則:

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

使用「+」、「-」、「*」和「/」四則運算；

可以使用百分比、px、em、rem等單位；

可以混合使用各種單位進行計算；

表示式中有「+」和「-」時，其前後必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；

表示式中有「*」和「/」時，其前後可以沒有空格，但建議留有空格。

瀏覽器的相容性:

瀏覽器對calc()的相容性還算不錯，在ie9+、ff4.0+、chrome19+、safari6+都得到較好支援，同樣需要在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有「firefox for android 14.0」支援，其他的全軍覆沒。

在實際使用時，同樣需要新增瀏覽器的字首

.elm

例項：

上面的結構很簡單，就是乙個div.demo的元素中包含了乙個div.box的元素。

知道總寬度是100%，在這個基礎上減去boder的寬度（5px * 2 = 10px）,在減去padding的寬度（10px * 2 = 20px），即"100% - (10px + 5px) * 2 = 30px" ，最終得到的值就是div.box的width值：

.demo

.box