Cale()介紹
calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。為何說是動態值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。
Cale()的用處
calc()能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50%+2em)”，這樣我們就不用考慮元素DIV的寬度值到底是多少，而把這個任務交由瀏覽器去計算。
calc()語法
calc()語法非常簡單，使用數學表達式來表示即可，就像我們小時候學加（+）、減（-）、乘（*）、除（/）一樣，如下：
.elm {
width: calc(expression);
}
其中”expression”是一個表達式，用來計算長度的表達式。
calc()的運算規則
calc()使用通用的數學運算規則，但是也提供更智能的功能：
1.使用“+”、“-”、“*”和“/”四則運算；
2.可以使用百分比、px、em、rem等單位；
3.可以混合使用各種單位進行計算；
4.表達式中有“+”和“-”時，其前后必須要有空格，如”widht:calc(12%+5em)”這種沒有空格的寫法是錯誤的；
5.表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。
瀏覽器的兼容性
瀏覽器對calc()的兼容性還算可以，在IE9+、FF4.0+、Chrome19+、Safari6+都得到比較好的支持，但是在書寫的過程中還是需要我們在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒有得到很好的兼容，僅有“firefox for android 14.0”支持。
以上的介紹相信大家對cale()已經不那么陌生了，接下來就讓我們通過簡單的例子來了解它吧。
首先讓我們看一個最常用的實例：
<div class="box"></div>
首先，我們給它添加普通樣式：
.demo {
width: 300px;
background: #60f;
}
.box {
width: 100%;
background: #f60;
height: 50px;
}
此時的效果很簡單，就是div.box完全遮蓋了div.demo，如下圖所示：
css3 cale()屬性介紹以及自適應布局使用方法
其次，在div.box上添加border和padding
這一步很棘手的事情來了，在div.box上添加10px的內距padding，同時添加5px的border：
.demo {
width: 300px;
background: #60f;
}
.box {
width: 100%;
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
}
為了更好的說明問題，我在div.demo上添加了一個padding：3px 0;
.demo {
width: 300px;
background: #60f;
padding: 3px 0;
}
.box {
width: 100%;
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
}
css3 cale()屬性介紹以及自適應布局使用方法
css3 cale()屬性介紹以及自適應布局使用方法
calc()的運用
為了解決撐破容器的問題，以前我們只能去計算div.box的寬度，用容器寬度減去padding和border的值，但有時候，我們苦於不知道元素的總寬度，比如說是自適應的布局，只知道一個百分值，但其他的值又是px之類的值，這就是難點，死卡住了。隨着CSS3的出現，其中利用box-sizing來改變元素的盒模型類型實使實現效果，但今天我們學習的calc()方法更是方便。
知道總寬度是100%，在這個基礎上減去boder的寬度（5px2=10px）,在減去padding的寬度（10px2=20px），即”100%-(10px+5px)*2=30px”，最終得到的值就是div.box的width值：
.demo {
width: 300px;
background: #60f;
padding: 3px 0;
}
.box {
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
width: 90%;/寫給不支持calc()的瀏覽器/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);
}
這樣一來，通過calc()計算后，div.box不在會超出其容器div.demo的寬度，如圖所示：
css3 cale()屬性介紹以及自適應布局使用方法
css3 cale()屬性介紹以及自適應布局使用方法
上面只是一個簡單的入門例子，接下來給大家帶來自適應布局的例子，先來看一下效果：
css3 cale()屬性介紹以及自適應布局使用方法
css3 cale()屬性介紹以及自適應布局使用方法
上面的例子我們采用了自適應布局，整個布局包含頭部、主要內容、邊欄、腳部，據圖內容查看demo中HTML部分。
HTML代碼：
<div id="header"></div>
<div id="main"></div>
<div id="accessory"></div>
<div id="footer"></div>
我們給body設置一個內邊距，並附上一些基本的樣式：
body {
background: #E8EADD;
color: #3C323A;
padding: 20px;
}
設置主容器“wrapper”的樣式，主容器的寬度我們設置為“100%-20%*2”，水平居中，css部分如下：
.wrapper {
width: 1024px;
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
margin: auto;
}
給不支持cale()的瀏覽器設置一個固定值”1024px”。
Header和footer設置樣式
這個例子中的header和footer很簡單，給他們添加了一個內距為20px，其他就是一些基本的樣式設置，那么其對應的寬度應該是”100%-20px*2″：
header {
background: #f60;
padding: 20px;
width: 984px;
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
}
footer {
clear:both;
background: #000;
padding: 20px;
color: #fff;
width: 984px;
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
}
主要內容設置樣式
給主內容設置了一個8px的邊框，20px的內距，並且向左浮動，同時設置了一個向右的外邊距“20”px，關鍵之處，我們主內容占容器寬度的75%，這樣一來，主內容的寬度應該是“75%-8px2-20px2”:
main {
border: 8px solid #B8C172;
float: left;
margin-bottom: 20px;
margin-right: 20px;
padding: 20px;
width: 704px;
width: -moz-calc(75% - 20px * 2 - 8px * 2);
width: -webkit-calc(75% - 20px * 2 - 8px * 2);
width: calc(75% - 20px * 2 - 8px * 2);
}
設置右邊欄樣式
給邊欄設置了一個25%的寬度，其除了包含8px的邊框，10px的內距外，還有主內容外距20px也要去掉，不然整個寬度與容器會相差20px,換句話說就會撐破容器掉下來。因此邊欄的實際寬度應該是”25%-10px2-8px2-20px”:
accessory {
border: 8px solid #B8C172;
float: right;
padding: 10px;
width: 208px;
width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
width: calc(25% - 10px * 2 - 8px * 2 - 20px);
}
這樣設置下來，大家就看到了上面demo展現的布局效果。看了上面的例子，相信大家對cale()的使用有了一定的提高，在使用calc()做頁面自適應布局會更加容易上手。