css3中的calc()函數有什么用

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

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

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

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

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

　　.demo{

　　width:calc(100px+50px);

　　}

　　為什么要使用calc()？

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

　　.demo{

　　width:100px+50px;

　　}

　　//使用SASS變量

　　$width-one:100px;

　　$width-two:50px;

　　.bar{

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

　　}

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

　　.demo{

　　width:calc(100%-50px);

　　}

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

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

　　//在SCSS中指定值

　　.demo{

　　width:100px+50px;

　　}

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

　　.demo{

　　width:150px;

　　}

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

　　//在CSS中指定值

　　.demo{

　　width:calc(100%-50px);

　　}

　　//瀏覽器的計算值

　　.demo{

　　width:calc(100%-50px);

　　}

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

　　calc()函數的使用

　　calc()函數可以使用數字屬性值來執行加、減、乘、除，四則運算。具體而言，它可以被使用在<length>，<frequency>，<angle>，<time>，<number>，<integer>等數據類型中。

　　這里有一些例子：

　　.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()函數可以嵌套使用。但是，內部函數將被視為簡單的括號表達式。舉例來說，以下嵌套表達式：

　　.demo{

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

　　}

　　相當于：

　　.demo{

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

　　}

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

　　示例：居中元素（假設.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()函數的兼容性

　　1.jpg

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

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

　　.demo{

　　width:90%;/*非支持瀏覽器設置靜態值*/

　　width:calc(100%-50px);

　　}

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