css3中的calc函數(shù)淺析

發(fā)布時(shí)間：2018-07-10 15:56:37 作者：奔跑的小前端

calc()對(duì)大家來(lái)說(shuō)，或許很陌生，不太會(huì)相信calc()是css中的部分。但它卻是就是css3的一部分，下面這篇文章主要給大家介紹了關(guān)于css3中calc函數(shù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下

前言

其實(shí)在之前學(xué)習(xí)CSS3的時(shí)候，我并沒(méi)有注意到有calc()這個(gè)屬性，后來(lái)在看一個(gè)大牛的代碼的時(shí)候看到了這個(gè)，然后就引發(fā)了后來(lái)的一系列的查找、學(xué)習(xí)，以及這篇博客的誕生。好了，廢話不多說(shuō)了，來(lái)干正事。

簡(jiǎn)介

其實(shí)，calc()這個(gè)形式看起來(lái)就很容易讓人想到Javascript里的函數(shù)，當(dāng)然他不是js里的函數(shù)，但是他有著類似函數(shù)的功能，可以用來(lái)計(jì)算，括號(hào)里是一個(gè)表達(dá)式，通常用calc()來(lái)指定元素的長(zhǎng)度，不管是width、height、border還是padding等都可以用他來(lái)指定。說(shuō)白了，calc()就是css3的一個(gè)指定元素長(zhǎng)度的屬性，他的特殊之處在于他可以做計(jì)算，而且支持混合使用各種單位，比如%、px、em等。所以這個(gè)屬性特別適用于那些自適應(yīng)的布局。

兼容性：在IE9+、FF4.0+、Chrome19+、Safari6+都得到了較好支持（據(jù)說(shuō)在使用時(shí)要加上供應(yīng)商前綴，但是我測(cè)試了一下，不加也是可以用的），但是在移動(dòng)端的支持不是很好。

正文：

最近在一次項(xiàng)目中我遇到一個(gè)很普通的問(wèn)題，相信大家都會(huì)遇到過(guò)，我的需求是這樣的，我的側(cè)邊欄的高度是百分百的，就像下面的例子一樣：

這時(shí)我要在頂部導(dǎo)航欄上加一些需求，要實(shí)現(xiàn)的效果類似于這樣，不過(guò)想很郁悶它出現(xiàn)了滾動(dòng)條，效果如下：

我不想它出現(xiàn)滾動(dòng)條，這個(gè)時(shí)候可能很多同學(xué)會(huì)說(shuō)，我可以用絕對(duì)定位等等，但我的頂部導(dǎo)航欄本來(lái)就是絕對(duì)定位呀，于是乎我翻了一翻css3，發(fā)現(xiàn)了一個(gè)神奇的函數(shù)，calc!!!(啊尼路亞，啊尼路亞，啊尼路亞，啊尼路亞~~~)

下面是一些粗鄙的無(wú)聊的復(fù)制粘貼過(guò)來(lái)的函數(shù)說(shuō)明：

calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。

需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如：width: calc(100vh - 10px)；

任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算；

calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；

calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；

支持版本：CSS3

兼容性：（開(kāi)頭說(shuō)了）

回到正事，了解了它的內(nèi)容，接下來(lái)就要看看它能給你帶來(lái)的好處，比如：消滅滾動(dòng)條，當(dāng)我把父級(jí)的高度設(shè)置成height: calc(100vh - '我的需求內(nèi)容高度')時(shí)滾動(dòng)條神奇的消失了，呈現(xiàn)了這樣的效果:

登登登登~?。?！是不是很神奇，為什么會(huì)這樣呢？因?yàn)?00vh就相當(dāng)于window.innerHeight, 是瀏覽器的內(nèi)部高度, 滾動(dòng)條高度也計(jì)算在內(nèi)。如果高只設(shè)置100%是可用高度, 就不包含滾動(dòng)條的高度啦, 是不是非常好用的一個(gè)東西(說(shuō)那么多大家走過(guò)路過(guò)應(yīng)施舍點(diǎn)點(diǎn)贊給我，謝謝謝謝~)

其實(shí)不僅僅只有高，還有很多很多應(yīng)用場(chǎng)景都是可以實(shí)現(xiàn)的，比如我們經(jīng)常會(huì)給自己的ul li設(shè)置padding或者margin，當(dāng)li的個(gè)數(shù)沒(méi)有超過(guò)一定的數(shù)量時(shí)它是不會(huì)換到第二行的，但有時(shí)候就因?yàn)槟敲匆稽c(diǎn)點(diǎn)padding或者margin就換行了，使得左邊或者右邊空白了一處很難看，大家都可以用calc這個(gè)函數(shù)去解決，我就不一一舉例了哈，本人技術(shù)水平有限，就說(shuō)到這了，如果有錯(cuò)的地方，希望大家可以多多指出，祝大家級(jí)別年年跳，薪資翻又翻。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。