1樓：龍氏風采
什麼是calc()?
calc()從字面可以把他理解為一個函式function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值。
為何說是動態值呢?因為我們使用的表示式來得到的值。不過calc()最大的好處就是用在流體佈局上，可以通過calc()計算得到元素的寬度。
calc()能做什麼？
calc()能讓你給元素的做計算，可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素div的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。
calc()語法
calc()語法非常簡單，就像小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表示式來表示：
.elm {
width: calc(expression);
其中"expression"是一個表示式，用來計算長度的表示式。
calc()的運算規則
calc()使用通用的數**算規則，但是也提供更智慧的功能：
使用“+”、“-”、“*” 和 “/”四則運算；
可以使用百分比、px、em、rem等單位；
可以混合使用各種單位進行計算；
表示式中有“+”和“-”時，其前後必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
表示式中有“*”和“/”時，其前後可以沒有空格，但建議留有空格。
瀏覽器的相容性
瀏覽器對calc()的相容性還算不錯，在ie9+、ff4.0+、chrome19+、safari6+都得到較好支援，同樣需要在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有“firefox for android 14.0”支援，其他的全軍覆沒。
在實際使用時，同樣需要新增瀏覽器的字首
.elm {
/*firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*standard */
calc();
通過上面的瞭解，對calc()不在那麼陌生，但對於實際的運用可能還是不太瞭解，來看一個最常用的例項：
上面的結構很簡單，就是一個div.demo的元素中包含了一個div.box的元素，接下來我們一步一步來看其中的變化。
第一步：新增普通樣式：
.demo {
width: 300px;
background: #60f;
.box {
width: 100%;
background: #f60;
height: 50px;
此時的效果很簡單，就是div.box完全遮蓋了div.demo，如下圖所示：
calc-step1
第二步，在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;
calc-step2
第三步，calc()的運用
為了解決撐破容器的問題，以前我們只能去計算div.box的寬度，用容器寬度減去padding和border的值，但有時候，我們苦於不知道元素的總寬度，比如說是自適應的佈局，只知道一個百分值，但其他的值又是px之類的值，這就是難點，死卡住了。隨著css3的出現，其中利用box-sizing來改變元素的盒模型型別實使實現效果，但今天我們學習的calc()方法更是方便。
知道總寬度是100%，在這個基礎上減去boder的寬度（5px * 2 = 10px）,在減去padding的寬度（10px * 2 = 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的寬度，如圖所示：
calc-step3
css3中怎樣實現div的2d，3d旋轉
新建乙個html檔案粘過去 2d 旋轉 3d 旋轉 2d旋轉 3d旋轉放大 2d旋轉 3d旋轉 html 2d 旋轉 3d 旋轉 js var x,y,n 0,ny 0,rotint,rotyint function rotatediv x document.getelementbyid rotat...
linux中使用rpm的錯誤linux中使用rpm的錯誤
你的系統什麼版本？應該是沒有達到可以執行 for linux 的基本條件。你用的什麼版本阿，竟然有那麼多包有問題，版本太老了 rpm 版 要求是fedora7 以上版本 或者公升級上面的包到指定版本 缺少安裝linux v1.0 preview2.i386時需要的很多包，他前面都有包的名稱了，裝上後...
如何在Windows10中使用全屏的開始選單
1進入設定介面 首先，點選桌面左下角的windows徽標，彈出開始選單 可憐的開始選單馬上就要被換掉了 在點選 設定 進入設定面板。2個性化 windows10的 設定 就好像之前版本windows的 控制面板 一樣。進入了設定，點選 個性化 按鈕，進入個性化設定介面。3選擇開始 在進入了個性化設定...