CSS3中新屬性calc()的詳細介紹

一、前言

　　calc()看起來像是javascript中的一個函數，而事實上它是用在Css中的，可以用它來計算長度（寬度或高度)，能夠自動根據不同尺寸的螢幕自動調接數值，從而很輕鬆的實現調適型配置展示在不同尺寸螢幕下。項目中常常碰到要始終置中的元素，當然想到的第一個就是使用margin：0 auto；或者使用定位和margin結合的這種簡單的方法，當同事告訴我讓我去研究研究calc的時候才真正的深入瞭解這個Css3中的新東西。

二、使用方法

　　calc()中的參數是一個計算公式，通過這個計算公式把計算寬度和數值的任務扔給不同尺寸下的瀏覽器，讓頁面能夠自己得出寬度或數值的結論，這些計算公式也都是很簡單的加( + )減( - )乘( * )除( / )運算。

p{    width: calc(15px + 15px);//30px    width: calc(15px - 10px);//5px    width: calc(15px*2);//30px    width: calc(15px/3);//5px}

　　從上面的例子中可以看出，加( + )減( - )運算中需要計算的數值與運算子之間是有空格的，並且這空格是不能省略的，而乘( * )除( / )運算裡的空格是可以省略的。

　　calc()中的運算式是可以使用百分比、px、em、rem等單位進行計算的，並且單位可以混在一起計算：

p{    width: calc(3em + 5px);//53px}

三、calc()嵌套

　　calc()是一個函數，那麼函數是可以支援嵌套的，可以通過不同的公式來算出最後的結果。

p{    --widthA: calc(10px + 190px);    --widthB: calc(var(--widthA) / 2);    --widthC: calc(var(--widthB) / 2);    width: var(--widthC);//50px}

四、簡單的置中

　　calc()可以計算寬度以後，置中顯示的實現就可以有很多方法，padding或者margin，但它的原理都是一樣的。

p{    padding: 0 calc((100% - 1024px)/2);}

　　假設中間的內容是固定寬度1024px，那麼擷取父級的寬度或者視窗的寬度100%，然後減去內容的寬度後剩下的就是需要分配給內容左右兩邊的寬度，將它們一分為二（/2）就可以實現中間1024px寬度的內容一直置中了。

五、相容性

　　calc()的相容性已經很高了，IE9+、FF4.0+、Chrome和Safari6+都已經支援calc()的應用，但還是要加上不同瀏覽器的首碼。

div{    -moz-calc(expression);    -webkit-calc(expression);    calc(expression);　　 //expression為計算公式}