這篇文章將為大家詳細講解有關(guān)css3中的calc()函數(shù)有什么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到昌吉網(wǎng)站設(shè)計與昌吉網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋昌吉地區(qū)。

css3中的calc()是什么？可以做什么？

calc()從字面看我們可以把它理解為一個function函數(shù)。其實calc就是英文單詞calculate(計算)的縮寫；它是一個css3新增的功能，可以用來指定元素的長度，動態(tài)計算長度值。（推薦學(xué)習(xí)：CSS3手冊）

在CSS3中calc()函數(shù)可以允許我們對屬性值執(zhí)行數(shù)學(xué)運算。

例如，我們可以使用calc()函數(shù)指定寬度值為兩個或更多數(shù)值相加的結(jié)果，而不是把元素寬度值聲明為一個靜態(tài)像素值。

.demo{

width:calc(100px+50px);

}

為什么要使用calc()？

如果你使用過像sass這樣的css預(yù)處理器的話，那么你可能會遇到如下的例子：

.demo{

width:100px+50px;

}

//使用SASS變量

$width-one:100px;

$width-two:50px;

.bar{

width:$width-one+$width-two;

}

然而，calc()函數(shù)提供了一個很好的解決方案，它有兩個好處。首先，我們可以組合不同的單位。具體來說，就是我們可以混合使用各種單位來進行計算，如百分比、px、em、rem等單位都可以混在一起使用。例如，我們可以創(chuàng)建一個表達式，它將從百分比值中減去像素值。

.demo{

width:calc(100%-50px);

}

在此示例中，.demo元素的寬度始終小于其父寬度的100％。

其次，使用calc()后，計算值是表達式本身，而不是表達式的結(jié)果值。這樣在使用css預(yù)處理器執(zhí)行數(shù)學(xué)表達式時，給予瀏覽器的值是表達式的結(jié)果值。

//在SCSS中指定值

.demo{

width:100px+50px;

}

//瀏覽器中編譯的CSS及其計算值

.demo{

width:150px;

}

使用calc()函數(shù)，瀏覽器解析的值是實際的calc()表達式。

//在CSS中指定值

.demo{

width:calc(100%-50px);

}

//瀏覽器的計算值

.demo{

width:calc(100%-50px);

}

這意味著瀏覽器中的值可以更加動態(tài)，并且可以隨著視圖的變化而改變。我們可以有一個元素(值為：視圖高度減去絕對值)，它會隨著視圖的變化而改變。

calc()函數(shù)的使用

calc()函數(shù)可以使用數(shù)字屬性值來執(zhí)行加、減、乘、除，四則運算。具體而言，它可以被使用在，，，，，等數(shù)據(jù)類型中。

這里有一些例子：

.demo{

width:calc(50vmax+3rem);

padding:calc(1vw+1em);

transform:rotate(calc(1turn+28deg));

background:hsl(100,calc(3*20%),40%);

font-size:calc(50vw/3);

}

注：

使用“+”和“-”時，其前后必須要有空格，如"widht:calc(12%+5em)"這種沒有空格的寫法是錯誤的；

使用“*”和“/”時，其前后可以沒有空格，但建議留有空格。

calc()嵌套使用

calc()函數(shù)可以嵌套使用。但是，內(nèi)部函數(shù)將被視為簡單的括號表達式。舉例來說，以下嵌套表達式：

.demo{

width:calc(100%/calc(100px*2));

}

相當于：

.demo{

width:calc(100%/(100px*2));

}

下面我們通過一個簡單的例子來看看calc()函數(shù)的使用

示例：居中元素（假設(shè).demo盒子的高度和寬度都為300px）

.demo{

position:absolute

top:calc(50%-150px);

left:calc(50%-150px);

}

這就相當于：

.demo{

position:absolute;

top:50%;

left:50%;

marging-top:-150px;

margin-left:-150px;

}

calc()函數(shù)的兼容性

1.jpg

可以看出瀏覽器對于calc()函數(shù)的支持度還是不錯的。

而對于不支持的瀏覽器來說，calc()函數(shù)將會把整個表達式給忽略掉。這就意味著我們將必須提供一個靜態(tài)值給不支持的瀏覽器使用。

.demo{

width:90%;/*非支持瀏覽器設(shè)置靜態(tài)值*/

width:calc(100%-50px);

}

關(guān)于“css3中的calc()函數(shù)有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。