首頁 >web前端 >css教學 >calc怎麼用？ css3 calc()函數的使用總結

calc怎麼用？ css3 calc()函數的使用總結

青灯夜游原創: 2018-11-01 13:34:3127864瀏覽

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);
}

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

<span style="font-size: 20px;"><strong>calc()</strong></span>#函數的使用

calc( )函數可以使用數字屬性值來執行加、減、乘、除，四則運算。具體而言，它可以被使用在，，，，，等資料型別。

這裡有一些例子：

.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()函數的相容性

calc怎麼用？ css3 calc()函數的使用總結

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

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

.demo{
width: 90%; /*非支持浏览器设置静态值*/
width: calc(100% - 50px);
}

總結：calc()函數在各種情況下都是很有用的，大家可以自己試試看，加深理解，希望能對大家的學習有所幫助。

calc怎麼用？ css3 calc()函數的使用總結

相關文章