calc()對大家來說，或許很陌生，不太會相信calc()是css中的部分。因為看其外表像個函式，既然是函式為何又出現在css中呢？這一點也讓我百思不得其解，今天有一同事告訴我，說css3中有乙個屬效能實現自適應的布局，首先讓我想到的是box-sizing，但跟我說還可以計算，這讓我不得不想起calc()。因為早先在官網和一些blog上看到相關的介紹，但一直沒有深入，也沒有自己去測試過。今天花了一下午的時間徹底學習了一下calc()。於是就有了這篇blog，希望對大家有所幫助。
平時在製作頁面的時候，總會碰到有的元素是100%的寬度。眾所周知，如果元素寬度為100%時，其自身不帶其他盒模型屬性設定還好，要是有別的，那將導致盒子撐破。比如說，有乙個邊框，或者說有margin和padding，這些都會讓你的盒子撐破。我們換句話來說，如果你的元素寬度是100%時，只要你在元素中新增了border,padding,margin任何一值，都將會把元素盒子撐破（標準模式下，除ie怪異模式）。這樣一來就會相當的麻煩，平時我們碰到這樣的現象時，也是相當的謹慎，有時甚至無法解決，只能通過改變結構來實現。就算你通過繁瑣的方法實現了，但有於瀏覽器的相容性而導致最終效果不一致。雖然前面介紹的css3屬性中的box-sizing在一定程度上解決這樣的問題，其實今天的calc()函式功能實現上面的效果來得更簡單。
什麼是calc()?
學習calc()之前，我們有必要先知道calc()是什麼？只有知道了他是個什麼東東？在實際運用中更好的使用他。
calc()從字面我們可以把他理解為乙個函式function。其實calc是英文單詞calculate(計算)的縮寫，是css3的乙個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值。為何說是動態值呢?因為我們使用的表示式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。
calc()能做什麼？
calc()能讓你給元素的做計算，你可以給乙個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說「width:calc(50% + 2em)」，這樣一來你就不用考慮元素div的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。
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通過上面的了解，大家對calc()不在那麼陌生，但對於實際的運用可能還是不太了解，那麼大家就接下來跟我一起動手，通過例項來了解他吧。首先我們來看乙個最常用的例項：
上面的結構很簡單，就是乙個div.demo的元素中包含了乙個div.box的元素，接下來我們一步一步來看其中的變化。
第一步：新增普通樣式：
.demo此時的效果很簡單，就是div.box完全遮蓋了div.demo，如下圖所示：.box
第二步，在div.box上新增border和padding
這一步很棘手的事情來了，在div.box上新增10px的內距padding，同時新增5px的border：
.demo為了更好的說明問題，我在div.demo上新增了乙個padding：3px 0;.box
.demo這個時候大家不知道能否想到問題會發生在哪？其實很簡單，這個時候div.box的寬度大於了其容器div.demo的總寬度，從而撐破容器伸出來了，如圖所示：.box
第三步，calc()的運用
為了解決撐破容器的問題，以前我們只能去計算div.box的寬度，用容器寬度減去padding和border的值，但有時候，我們苦於不知道元素的總寬度，比如說是自適應的布局，只知道乙個百分值，但其他的值又是px之類的值，這就是難點，死卡住了。隨著css3的出現，其中利用box-sizing來改變元素的盒模型型別實使實現效果，但今天我們學習的calc()方法更是方便。
知道總寬度是100%，在這個基礎上減去boder的寬度（5px * 2 = 10px）,在減去padding的寬度（10px * 2 = 20px），即"100% - (10px + 5px) * 2 = 30px" ，最終得到的值就是div.box的width值：
.demo這樣一來，通過calc()計算後，div.box不在會超出其容器div.demo的寬度，如圖所示：.box
上面是乙個簡單的例項，接下來我們一起來看乙個自適應布局的例子：
上面的demo是乙個非常簡單而常見的布局效果，在這個布局中，我採用了自適應布局。整個布局包含了「頭部」、「主內容」、「邊欄」和「腳部」，並且「主內容」居左，「邊欄」靠右，具體結構請看demo中的html部分。
接下來，我們主要看看css部分：
1、在body中設定乙個內距，並附上一些基本的樣式，大家可以根據自己需要進行不同的設定，此例**如下：
body主容器的寬度是「100% - 20px * 2」,並且水平居中：
width: 1024px; /* fallback for browsers that don't support the calc() function */
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
margin: auto;
}給不支援calc()的瀏覽器設定了乙個固定寬度值「1024px」。
3、給header和footer設定樣式
這個例子中的header和footer很簡單，給他們新增了乙個內距為20px，其他就是一些基本的樣式設定，那麼其對應的寬度應該是"100% - 20px * 2"：
#header4、給主內容設定樣式#footer
給主內容設定了乙個8px的邊框，20px的內距，並且向左浮動，同時設定了乙個向右的外邊距「20」px，關鍵之處，我們主內容佔容器寬度的75%，這樣一來，主內容的寬度應該是「75% - 8px * 2 - 20px * 2」:
#main4、設定右邊欄樣式
給邊欄設定了乙個25%的寬度，其除了包含8px的邊框，10px的內距外，還有主內容外距20px也要去掉，不然整個寬度與容器會相差20px,換句話說就會撐破容器掉下來。因此邊欄的實際寬度應該是"25% - 10px * 2 - 8px * 2 -20px":
#accessory這樣一來，大家就看到了上面demo展現的布局效果。經過此例的學習，大家是不是會覺得使用calc()用於自適應布局是超爽的呀。此時有很多同學肯定會感吧，苦逼的ie6-8不支援，不敢使用。
css3 中的calc用法
calc 函式用於動態計算長度值。1.需要注意的是，運算子前後都需要保留乙個空格，例如 width calc 100 10px 2.任何長度值都可以使用calc 函式進行計算 3.calc 函式支援 運算 4.calc 函式使用標準的數 算優先順序規則 calc是css3中的計算，ie10 瀏覽器支...
CSS3中 的 calc 函式
css3 的 calc 函式。這裡的意思是設定寬度比100 的寬度少30px。calc 函式用於動態計算長度值。calc 函式支援 運算 calc 函式使用標準的數 算優先順序規則 在less中使用以下樣式寬度計算錯誤 width calc 100 30px 計算出來是 width 70 分析 px...
五款漂亮的純CSS3動畫按鈕的例項教程
今天來分享很不錯的css3按鈕動畫，這款css3按鈕一共有5種動畫方式，每一種都是滑鼠滑過動畫形式，雖然這些動畫按鈕不是十分華麗，但是小編覺得不像其他按鈕那樣很難擴充套件，我們可以修改css 隨意改變自己喜歡的顏色樣式。讓我們一起來看看實現這5中樣式動畫按鈕的html 和css 吧。以第乙個按鈕為例...