1.什么是calc()

calc()從字面我們可以把他理解為一個函數(shù)function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度

2.calc()能做什么？

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

3.calc()語法

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

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

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

5.實例：我們一起來看一個自適應(yīng)布局的例子

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

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

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

主容器的寬度是“100% - 20px * 2”,并且水平居中，給不支持calc()的瀏覽器設(shè)置了一個固定寬度值“1024px”

3.給header和footer設(shè)置樣式

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

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

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

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

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

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

總結(jié)

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

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