一、前言

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

?

二、使用方法

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

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

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

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

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

?

三、calc()嵌套

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

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

?

四、簡單的居中

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

div{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為計算公式 }

總結

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

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