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這個函數去解決,我就不一一舉例了哈,本人技術水平有限,就說到這了,如果有錯的地方,希望大家可以多多指出,祝大家層級年年跳,薪資翻又翻。