資訊專欄INFORMATION COLUMN
摘要：為什么是如果你使用過預處理器，比如，以上示例你或許碰到過然而，函數(shù)提供了更好的解決方案。當使用預處理器做數(shù)學運算時，給定值為表達式的結果。使用函數(shù)可以用來對數(shù)值屬性執(zhí)行四則運算。函數(shù)的計算值如下所示降級方案已經(jīng)得到普遍支持。
CSS3 的 calc() 函數(shù)允許我們在屬性值中執(zhí)行數(shù)學操作。例如，我們可以使用 calc() 指定一個元素寬的固定像素值為多個數(shù)值的和。
.foo {
width: calc(100px + 50px);
}
為什么是 calc()
如果你使用過 CSS 預處理器，比如 SASS，以上示例你或許碰到過
.foo {
width: 100px + 50px;
}
$width-one: 100px;
$width-two: 50px;
.bar {
width: $width-one + $width-two;
}
然而，calc() 函數(shù)提供了更好的解決方案。首先，我們能夠組合不同的單元。特別是，我們可以混合計算絕對單位（比如百分比與視口單元）與相對單位（比如像素）。例如，我們可以創(chuàng)造一個表達式，用一個百分比減掉一個像素值。
.foo {
width: calc(100% - 50px);
}
本例中，.foo 元素總是小于它父元素寬度 50px。
第二，使用 calc()，計算值是表達式它自己，而非表達式的結果。當使用 CSS 預處理器做數(shù)學運算時，給定值為表達式的結果。
.foo {
width: 100px + 50px;
}
.foo {
width: 150px;
}
然而，瀏覽器解析的 calc() 的值為真實的 calc() 表達式。
.foo {
width: calc(100% - 50px);
}
.foo {
width: calc(100% - 50px);
}
這意味著瀏覽器中的值可以更加靈活，能夠響應視口的改變。我們能夠給元素設定一個高度為視口的高度減去一個絕對值，它將隨視口的改變進行調(diào)節(jié)。
使用 calc()calc() 函數(shù)可以用來對數(shù)值屬性執(zhí)行四則運算。比如，
這里有一些示例：
.foo {
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);
}
clac() 嵌套
calc() 函數(shù)可以嵌套。在函數(shù)里邊，會被視為簡單的括號表達式，如下例所示。
.foo {
width: calc( 100% / calc(100px * 2) );
}
函數(shù)的計算值如下所示：
.foo {
width: calc( 100% / (100px * 2) );
}
降級方案
clac() 已經(jīng)得到普遍支持。
對于不支持 calc() 的瀏覽器，整個屬性值表達式將被忽略。不過我們可以對那些不支持 calc() 的瀏覽器，使用一個固定值作為降級方案。
.foo {
width: 90%;
width: calc(100% - 50px);
}
什么場景可以使用 calc()
Example 1 - 居中元素
使用 calc() 給我們提供另一個垂直居中元素的解決方案。如果我們知道元素的尺寸，一個典型的解決方案是使用負外邊距移動自身距離高與寬的一半，如下所示：
.foo {
position: absolute
top: 50%;
left: 50%;
marging-top: -150px;
margin-left: -150px;
}
使用 calc() 函數(shù)，我們僅僅通過 top 與 left 屬性便能實現(xiàn)相同的效果：
.foo {
position: absolute
top: calc(50% - 150px);
left: calc(50% - 150px);
}
Flexbox 的介入，已經(jīng)很少需要這種方法了。不過，一些情況下 Flexbox 不能被使用。比如，元素需要絕對定位或者固定定位，這種方法是有用的。
Example 2 - 創(chuàng)建根柵格尺寸使用 rem，calc() 函數(shù)能夠用來創(chuàng)建一個基于視口的柵格。我們可以設置根元素的字體大小為視口寬度的一部分。
html {
font-size: calc(100vw / 30);
}
現(xiàn)在，1rem 為視口寬度的 1/30。在頁面上的任何文本，將會根據(jù)你的視口自動縮放。更進一步，相同比例的視口總會顯示相同的文本數(shù)量，不管視口的真實尺寸是多少。
如果我們對非文本使用 rem 設置大小，它們同樣遵守這個行為。一個 1rem 寬度的元素總是視口元素寬度的 1/30。
Example 3 - 清晰度最后，calc()使計算更加清晰。如果你使一組項目為它們父元素容器寬度的 1/6，你可能這么寫：
.foo {
width: 16.666666667%;
}
然而，它能夠更加清晰并具有可讀性：
.foo {
width: calc(100% / 6);
}
使用 calc()，我們還能做更多的事情，比如創(chuàng)建一個柵格系統(tǒng)。它是 CSS 最有用的新特性之一。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/53994.html
摘要：為什么是如果你使用過預處理器，比如，以上示例你或許碰到過然而，函數(shù)提供了更好的解決方案。當使用預處理器做數(shù)學運算時，給定值為表達式的結果。使用函數(shù)可以用來對數(shù)值屬性執(zhí)行四則運算。函數(shù)的計算值如下所示降級方案已經(jīng)得到普遍支持。 CSS3 的 calc() 函數(shù)允許我們在屬性值中執(zhí)行數(shù)學操作。例如，我們可以使用 calc() 指定一個元素寬的固定像素值為多個數(shù)值的和。 .foo { w...
摘要：為什么是如果你使用過預處理器，比如，以上示例你或許碰到過然而，函數(shù)提供了更好的解決方案。當使用預處理器做數(shù)學運算時，給定值為表達式的結果。使用函數(shù)可以用來對數(shù)值屬性執(zhí)行四則運算。函數(shù)的計算值如下所示降級方案已經(jīng)得到普遍支持。 CSS3 的 calc() 函數(shù)允許我們在屬性值中執(zhí)行數(shù)學操作。例如，我們可以使用 calc() 指定一個元素寬的固定像素值為多個數(shù)值的和。 .foo { w...
摘要：，我想大家應該都知道或者聽過，是前端一個工具可以讓各個模塊進行加載預處理再進行打包。 webpack，我想大家應該都知道或者聽過，Webpack是前端一個工具,可以讓各個模塊進行加載,預處理,再進行打包?，F(xiàn)代的前端開發(fā)很多環(huán)境都依賴webpack構建，比如vue官方就推薦使用webpack.廢話不多說，我們趕緊開始吧. 第一步、安裝webpack 新建文件夾webpack->再在web...
摘要：編譯工具編譯國人開發(fā)的編譯工具下載地址庫瀏覽器端使用的使用下載安裝后，打開設置，更換語言為簡體中文，然后重啟。 1、Less是什么？ Less類似于jQuery LESCSS使用這個動態(tài)樣式語言，屬于CSS預處理語言的一種，它使用類似CSS的語法，為CSS賦予了動態(tài)語言的特性，如變量、繼承、運算、函數(shù)等，更方便CSS的編寫和維護。 LESSCSS可以在多種語言、環(huán)境中使用，包括瀏覽器...
摘要：變量的函數(shù)引用的自定義屬性被稱為變量。為此，可讀性和可維護性是自定義屬性最大的優(yōu)勢。自定義屬性作用域在中，變量有作用域一說。因此，在選擇器中聲明的自定義屬性，其作用域的范圍是全局范圍，也就是全局作用域。 引言 ??CSS語言是一種聲明式語言，不像其他語言有變量、條件和邏輯等特性，因為這個原因，社區(qū)中有了各種CSS處理器語言，比如Sass、LESS和Stylus等。這些處理器語言引入了一...
閱讀 3998·2021-11-23 10:09
閱讀 1353·2021-11-23 09:51
閱讀 2956·2021-11-23 09:51
閱讀 1605·2021-09-07 09:59
閱讀 2364·2019-08-30 15:55
閱讀 2314·2019-08-30 15:55
閱讀 2963·2019-08-30 15:52
閱讀 2573·2019-08-26 17:04
