1.什么是calc()

calc()從字面我們可以把他理解為一個(gè)函數(shù)function。其實(shí)calc是英文單詞calculate(計(jì)算)的縮寫(xiě)，是css3的一個(gè)新增的功能，用來(lái)指定元素的長(zhǎng)度

2.calc()能做什么？

calc()能讓你給元素的值做計(jì)算，你可以給一個(gè)div元素結(jié)合百分比、em、px和rem單位值計(jì)算出其寬度或者高度，比如說(shuō)“width:calc(50% + 2em)”，這樣一來(lái)你就不用考慮元素DIV的寬度值到底是多少，而把這個(gè)煩人的任務(wù)交由瀏覽器去計(jì)算

3.calc()語(yǔ)法

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

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

• 使用“+”、“-”、“*” 和 “/”四則運(yùn)算
• 可以使用百分比、px、em、rem等單位
• 可以混合使用各種單位進(jìn)行計(jì)算
• 表達(dá)式中有“+”和“-”時(shí)，其前后必須要有空格，如”widht: calc(12%+5em)”這種沒(méi)有空格的寫(xiě)法是錯(cuò)誤的
• 表達(dá)式中有“*”和“/”時(shí)，其前后可以沒(méi)有空格，但建議留有空格

5.實(shí)例：我們一起來(lái)看一個(gè)自適應(yīng)布局的例子

在這個(gè)布局中，我采用了自適應(yīng)布局。整個(gè)布局包含了“頭部”、“主內(nèi)容”、“邊欄”和“腳部”，并且“主內(nèi)容”居左，“邊欄”靠右

1.在body中設(shè)置一個(gè)內(nèi)距，并附上一些基本的樣式，大家可以根據(jù)自己需要進(jìn)行不同的設(shè)置

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

主容器的寬度是“100% - 20px * 2”,并且水平居中，給不支持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”

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

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

5.設(shè)置右邊欄樣式

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的CSS之calc()使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。