平時在製作頁面的時候，總會碰到有的元素是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()的語法：
用於動態計算長度值。
需要注意的是，運算子前後都需要保留乙個空格，例如：width: calc(100% - 10px)；
任何長度值都可以使用calc()函式進行計算；
calc()函式支援 「+」, 「-「, 「*」, 「/」 運算；
calc()函式使用標準的數**算優先順序規則；
瀏覽器對calc()的相容性還算不錯，在ie9+、ff4.0+、chrome19+、safari6+都得到較好支援，同樣需要在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有「firefox for android 14.0」支援，其他的全軍覆沒（移動端一般不用它）。
大家在實際使用時，同樣需要新增瀏覽器的字首
.elmclass="box">div>
div>
上面的結構很簡單，就是乙個div.demo的元素中包含了乙個div.box的元素，接下來我們一步一步來看其中的變化。
第一步：新增普通樣式：
.demo
.box
第二步，在div.box上新增border和padding
這一步很棘手的事情來了，在div.box上新增10px的內距padding，同時新增5px的border：
.demo
.box
.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
.box
css3 calc 方法詳解
今天又請教了到了乙個之前自己沒有用到過得知識 calc 希望每乙個在學前端的路上都能遇到乙個帶著跑起來的大神 不求飛，只求踏踏實實一點一滴積累 渴求學習新知識的人，就尋求乙個能夠指導交流，共同進步的同伴吧！我們在涉及移動端布局的時候上篇講到box sizing的用法。但它可能會影響到其他布局。此處的...
css3 calc 屬性介紹
calc的英文是calculate的縮寫，中文為計算的意思，是css3的乙個新增的功能，用來只當元素的長度。比如說 你可以用calc 給元素margin padding border font size和width等屬性設定動態值。為什麼說是動態值呢？因為我們是使用數學表示式來得到的值。用法 既然是...
CSS3例項教程 詳解calc 函式功能
calc 對大家來說，或許很陌生，不太會相信calc 是css中的部分。因為看其外表像個函式，既然是函式為何又出現在css中呢？這一點也讓我百思不得其解，今天有一同事告訴我，說css3中有乙個屬效能實現自適應的布局，首先讓我想到的是box sizing，但跟我說還可以計算，這讓我不得不想起calc ...