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为计算公式}

以上是CSS3中新屬性calc()的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！