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()
函數的支援度還是不錯的。
而對於不支援的瀏覽器來說,calc()函數會把整個表達式給忽略掉。這就意味著我們將必須提供一個靜態值給不支援的瀏覽器使用。
.demo{ width: 90%; /*非支持浏览器设置静态值*/ width: calc(100% - 50px); }
總結:calc()函數在各種情況下都是很有用的,大家可以自己試試看,加深理解,希望能對大家的學習有所幫助。
相關推薦:
1、php中文網影片教學:CSS3教學
2、php中文網特效下載:css3特效程式碼
以上是calc怎麼用? css3 calc()函數的使用總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!