css3中的calc函數淺析_css3

calc()對大家來說，或許很陌生，不太會相信calc()是css中的部分。但它是就是css3的一部分，以下這篇文章主要給大家介紹了關於css3中calc函數的相關資料，文中透過範例程式碼介紹的非常詳細，需要的朋友可以參考下

前言

其實在之前學習CSS3的時候，我並沒有註意到有calc()這個屬性，後來在看一個大牛的程式碼的時候看到了這個，然後就引發了後來的一系列的尋找、學習，以及這篇部落格的誕生。好了，廢話不多說了，來幹正事。

簡介

其實，calc()這個形式看起來就很容易讓人想到Javascript裡的函數，當然他不是js裡的函數，但是他有著類似函數的功能，可以用來計算，括號裡是一個表達式，通常用calc()來指定元素的長度，不管是width、height、border還是padding等都可以用他來指定。說穿了，calc()就是css3的一個指定元素長度的屬性，他的特殊之處在於他可以做計算，而且支援混合使用各種單位，例如%、px、em等。所以這個屬性特別適用於那些自適應的佈局。

相容性：在IE9 、FF4.0 、Chrome19 、Safari6 都得到了較好支援（據說在使用時要加上供應商前綴，但是我測試了一下，不加也是可以用的） ，但是在行動端的支援不是很好。

正文：

最近在一次專案中我遇到一個很普通的問題，相信大家都會遇到過，我的需求是這樣的，我的側邊欄的高度是百分之百的，就像下面的例子一樣：

#這時我要在頂部導覽列上加一些需求，要實現的效果類似於這樣，不過想很鬱悶它出現了滾動條，效果如下：

我不想它出現滾動條，這個時候可能很多同學會說，我可以用絕對定位等等，但我的頂部導航欄本來就是絕對定位呀，於是乎我翻了一翻css3，發現了一個神奇的函數，calc!!!(啊尼路亞，啊尼路亞，啊尼路亞，啊尼路亞~~~)

下面是一些粗鄙的無聊的複製粘貼過來的函數說明：

calc() 函數用於動態計算長度值。

要注意的是，運算子前後都需要保留一個空格，例如：width: calc(100vh - 10px)；

任何長度值都可以使用calc()函數來計算；

calc()函數支援" ", "-", "*", "/" 運算；

calc()函數使用標準的數學運算優先權規則；

支援版本：CSS3

相容性：（開頭說了）

回到正事，了解了它的內容，接下來就要看看它能為你帶來的好處，例如：消滅滾動條，當我把父級的高度設定成height: calc(100vh - '我的需求內容高度')時滾動條神奇的消失了，呈現了這樣的效果:

#登登登登~！ ！ ！是不是很神奇，為什麼會這樣呢？因為100vh就相當於window.innerHeight, 是瀏覽器的內部高度, 捲軸高度也計算在內。如果高隻設定100%是可用高度, 就不包含滾動條的高度啦, 是不是非常好用的一個東西(說那麼多大家走過路過應施捨點讚給我，謝謝謝謝~)

其實不只高，還有很多很多應用場景都是可以實現的，例如我們經常會給自己的ul li設定padding或margin，當li的個數沒有超過一定的數量時它是不會換到第二行的，但有時候就因為那麼一點點padding或margin就換行了，使得左邊或是右邊空白了一處很難看，大家都可以用calc這個函數去解決，我就不一一舉例了哈，本人技術水準有限，就說到這了，如果有錯的地方，希望大家可以多多指出，祝大家級別年年跳，薪資翻又翻。

#

以上是css3中的calc函數淺析_css3的詳細內容。更多資訊請關注PHP中文網其他相關文章！