1.什么是calc()

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

2.calc()能做什么？

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

3.calc()語法

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

4.calc()的運算規則

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

5.實例：我們一起來看一個自適應布局的例子

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

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

2.設置主容器“wrapper”的樣式

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

3.給header和footer設置樣式

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

4.給主內容設置樣式

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

5.設置右邊欄樣式

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。