摘自http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

平時(shí)在制作頁面的時(shí)候，總會(huì)碰到有的元素是100%的寬度隶垮。眾所周知蟹瘾，如果元素寬度為100%時(shí)蜕青，其自身不帶其他盒模型屬性設(shè)置還好匕争，要是有別的渊啰，那將導(dǎo)致盒子撐破等太。比如說捂齐，有一個(gè)邊框，或者說有margin和padding澈驼，這些都會(huì)讓你的盒子撐破辛燥。我們換句話來說，如果你的元素寬度是100%時(shí)缝其，只要你在元素中添加了border,padding,margin任何一值挎塌，都將會(huì)把元素盒子撐破（標(biāo)準(zhǔn)模式下，除IE怪異模式）内边。這樣一來就會(huì)相當(dāng)?shù)穆闊┝穸迹綍r(shí)我們碰到這樣的現(xiàn)象時(shí)，也是相當(dāng)?shù)闹?jǐn)慎漠其，有時(shí)甚至無法解決嘴高，只能通過改變結(jié)構(gòu)來實(shí)現(xiàn)。就算你通過繁瑣的方法實(shí)現(xiàn)了和屎，但有于瀏覽器的兼容性而導(dǎo)致最終效果不一致拴驮。雖然前面介紹的CSS3屬性中的box-sizing在一定程度上解決這樣的問題，其實(shí)今天的calc()函數(shù)功能實(shí)現(xiàn)上面的效果來得更簡(jiǎn)單（解決自適應(yīng)）柴信。

什么是calc()?

學(xué)習(xí)calc()之前套啤，我們有必要先知道calc()是什么？只有知道了他是個(gè)什么東東随常？在實(shí)際運(yùn)用中更好的使用他潜沦。

calc()從字面我們可以把他理解為一個(gè)函數(shù)function萄涯。其實(shí)calc是英文單詞calculate(計(jì)算)的縮寫，是css3的一個(gè)新增的功能唆鸡，用來指定元素的長(zhǎng)度涝影。比如說，你可以使用calc()給元素的border争占、margin燃逻、pading、font-size和width等屬性設(shè)置動(dòng)態(tài)值燃乍。為何說是動(dòng)態(tài)值呢?因?yàn)槲覀兪褂玫谋磉_(dá)式來得到的值唆樊。不過calc()最大的好處就是用在流體布局上，可以通過calc()計(jì)算得到元素的寬度刻蟹。

calc()能做什么逗旁？

calc()能讓你給元素的做計(jì)算，你可以給一個(gè)div元素舆瘪，使用百分比片效、em、px和rem單位值計(jì)算出其寬度或者高度英古，比如說“width:calc(50% + 2em)”淀衣，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個(gè)煩人的任務(wù)交由瀏覽器去計(jì)算召调。

calc()語法

calc()語法非常簡(jiǎn)單膨桥，就像我們小時(shí)候?qū)W加 （+）、減（-）唠叛、乘（*）只嚣、除（/）一樣，使用數(shù)學(xué)表達(dá)式來表示：

.elm{width:calc(expression);}

其中"expression"是一個(gè)表達(dá)式艺沼，用來計(jì)算長(zhǎng)度的表達(dá)式册舞。

calc()的運(yùn)算規(guī)則

calc()使用通用的數(shù)學(xué)運(yùn)算規(guī)則，但是也提供更智能的功能：

使用“+”障般、“-”调鲸、“*” 和 “/”四則運(yùn)算；

可以使用百分比挽荡、px藐石、em、rem等單位定拟；

可以混合使用各種單位進(jìn)行計(jì)算贯钩；

表達(dá)式中有“+”和“-”時(shí)，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯(cuò)誤的角雷；

表達(dá)式中有“*”和“/”時(shí)，其前后可以沒有空格性穿，但建議留有空格勺三。

瀏覽器的兼容性

瀏覽器對(duì)calc()的兼容性還算不錯(cuò)，在IE9+需曾、FF4.0+吗坚、Chrome19+、Safari6+都得到較好支持呆万，同樣需要在其前面加上各瀏覽器廠商的識(shí)別符商源，不過可惜的是，移動(dòng)端的瀏覽器還沒僅有“firefox for android 14.0”支持谋减，其他的全軍覆沒牡彻。

大家在實(shí)際使用時(shí)，同樣需要添加瀏覽器的前綴

.elm {/*Firefox*/-moz-calc(expression);/*chrome safari*/-webkit-calc(expression);/*Standard */calc(); }

通過上面的了解出爹，大家對(duì)calc()不在那么陌生，但對(duì)于實(shí)際的運(yùn)用可能還是不太了解严就，那么大家就接下來跟我一起動(dòng)手总寻，通過實(shí)例來了解他吧。首先我們來看一個(gè)最常用的實(shí)例：

上面的結(jié)構(gòu)很簡(jiǎn)單梢为，就是一個(gè)div.demo的元素中包含了一個(gè)div.box的元素渐行，接下來我們一步一步來看其中的變化。

第一步：添加普通樣式：

.demo{width:300px;background:#60f;}.box{width:100%;background:#f60;height:50px;}

此時(shí)的效果很簡(jiǎn)單铸董，就是div.box完全遮蓋了div.demo祟印，如下圖所示：

第二步，在div.box上添加border和padding

這一步很棘手的事情來了袒炉，在div.box上添加10px的內(nèi)距padding旁理，同時(shí)添加5px的border：

.demo{width:300px;background:#60f;}.box{width:100%;background:#f60;height:50px;padding:10px;border:5px solid green;}

為了更好的說明問題，我在div.demo上添加了一個(gè)padding：3px 0;

.demo{width:300px;background:#60f;padding:3px0;}.box{width:100%;background:#f60;height:50px;padding:10px;border:5px solid green;}

這個(gè)時(shí)候大家不知道能否想到問題會(huì)發(fā)生在哪我磁？其實(shí)很簡(jiǎn)單孽文，這個(gè)時(shí)候div.box的寬度大于了其容器div.demo的總寬度，從而撐破容器伸出來了夺艰，如圖所示：

第三步芋哭，calc()的運(yùn)用

為了解決撐破容器的問題，以前我們只能去計(jì)算div.box的寬度郁副，用容器寬度減去padding和border的值减牺，但有時(shí)候，我們苦于不知道元素的總寬度，比如說是自適應(yīng)的布局拔疚，只知道一個(gè)百分值肥隆，但其他的值又是px之類的值，這就是難點(diǎn)稚失，死卡住了栋艳。隨著CSS3的出現(xiàn)，其中利用box-sizing來改變?cè)氐暮心Ｐ皖愋蛯?shí)使實(shí)現(xiàn)效果句各，但今天我們學(xué)習(xí)的calc()方法更是方便吸占。

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

.demo{width:300px;background:#60f;padding:3px0;}.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()計(jì)算后初厚，div.box不在會(huì)超出其容器div.demo的寬度件蚕，如圖所示：

上面是一個(gè)簡(jiǎn)單的實(shí)例，接下來我們一起來看一個(gè)自適應(yīng)布局的例子：

上面的demo是一個(gè)非常簡(jiǎn)單而常見的布局效果惧所，在這個(gè)布局中骤坐，我采用了自適應(yīng)布局。整個(gè)布局包含了“頭部”下愈、“主內(nèi)容”纽绍、“邊欄”和“腳部”，并且“主內(nèi)容”居左势似，“邊欄”靠右拌夏，具體結(jié)構(gòu)請(qǐng)看DEMO中的html部分。

接下來履因，我們主要看看css部分：

1障簿、在body中設(shè)置一個(gè)內(nèi)距，并附上一些基本的樣式栅迄，大家可以根據(jù)自己需要進(jìn)行不同的設(shè)置站故，此例代碼如下：

body{background:#E8EADD;color:#3C323A;padding:20px;}

2、設(shè)置主容器“wrapper”的樣式

主容器的寬度是“100% - 20px * 2”,并且水平居中：

.wrapper{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()的瀏覽器設(shè)置了一個(gè)固定寬度值“1024px”毅舆。

3西篓、給header和footer設(shè)置樣式

這個(gè)例子中的header和footer很簡(jiǎn)單，給他們添加了一個(gè)內(nèi)距為20px憋活，其他就是一些基本的樣式設(shè)置岂津，那么其對(duì)應(yīng)的寬度應(yīng)該是"100% - 20px * 2"：

#header{background:#f60;padding:20px;width:984px;/*Fallback for browsers that don't support the calc() function*/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;/* Fallback for browsers that don't support the calc() function */width:-moz-calc(100% -40px);width:-webkit-calc(100% -40px);width:calc(100% -40px);}

4、給主內(nèi)容設(shè)置樣式

給主內(nèi)容設(shè)置了一個(gè)8px的邊框悦即，20px的內(nèi)距吮成，并且向左浮動(dòng)橱乱，同時(shí)設(shè)置了一個(gè)向右的外邊距“20”px，關(guān)鍵之處粱甫，我們主內(nèi)容占容器寬度的75%泳叠，這樣一來，主內(nèi)容的寬度應(yīng)該是“75% - 8px * 2 - 20px * 2”:

#main{border:8px solid#B8C172;float:left;margin-bottom:20px;margin-right:20px;padding:20px;width:704px;/* Fallback for browsers that don't support the calc() function */width:-moz-calc(75% -20px *2-8px *2);width:-webkit-calc(75% -20px *2-8px *2);width:calc(75% -20px *2-8px *2);}

4茶宵、設(shè)置右邊欄樣式

給邊欄設(shè)置了一個(gè)25%的寬度析二，其除了包含8px的邊框，10px的內(nèi)距外节预，還有主內(nèi)容外距20px也要去掉，不然整個(gè)寬度與容器會(huì)相差20px,換句話說就會(huì)撐破容器掉下來属韧。因此邊欄的實(shí)際寬度應(yīng)該是"25% - 10px * 2 - 8px * 2 -20px":

#accessory{border:8px solid#B8C172;float:right;padding:10px;width:208px;/* Fallback for browsers that don't support the calc() function */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展現(xiàn)的布局效果。經(jīng)過此例的學(xué)習(xí)宵喂，大家是不是會(huì)覺得使用calc()用于自適應(yīng)布局是超爽的呀糠赦。此時(shí)有很多同學(xué)肯定會(huì)感吧，苦逼的IE6-8不支持锅棕，不敢使用拙泽。

最后在給大家提供一個(gè)heihgt的實(shí)例：

時(shí)隔好久沒有寫blog，不知道大家對(duì)calc()整明白了沒有裸燎，要是沒有的話顾瞻，繼續(xù)動(dòng)手寫幾個(gè)例子吧。如果您有更好的分享德绿，記得告訴我們喲荷荤。