css3 的 calc() 函式允許我們在屬性值中執行數學操作。例如,我們可以使用 calc() 指定乙個元素寬的固定畫素值為多個數值的和。
.foo
為什麼是 calc()
如果你使用過 css 預處理器,比如 sass,以上示例你或許碰到過
.foo
$width-one
: 100px;
$width-two
: 50px;
.bar
然而,calc() 函式提供了更好的解決方案。首先,我們能夠組合不同的單元。特別是,我們可以混合計算絕對單位(比如百分比與視口單元)與相對單位(比如畫素)。例如,我們可以創造乙個表示式,用乙個百分比減掉乙個畫素值。
.foo
本例中,.foo 元素總是小於它父元素寬度 50px。
第二,使用 calc(),計算值是表示式它自己,而非表示式的結果。當使用 css 預處理器做數**算時,給定值為表示式的結果。
.foo
.foo
然而,瀏覽器解析的 calc() 的值為真實的 calc() 表示式。
.foo
.foo
這意味著瀏覽器中的值可以更加靈活,能夠響應視口的改變。我們能夠給元素設定乙個高度為視口的高度減去乙個絕對值,它將隨視口的改變進行調節。
使用 calc()
calc() 函式可以用來對數值屬性執行四則運算。比如,,,,,或者 資料型別。
這裡有一些示例:
.foo
clac() 巢狀
calc() 函式可以巢狀。在函式裡邊,會被視為簡單的括號表示式,如下例所示。
.foo
函式的計算值如下所示:
.foo
降級方案
clac() 已經得到普遍支援。
對於不支援 calc() 的瀏覽器,整個屬性值表示式將被忽略。不過我們可以對那些不支援 calc() 的瀏覽器,使用乙個固定值作為降級方案。
.foo
什麼場景可以使用 calc()
example 1 - 居中元素
使用 calc() 給我們提供另乙個垂直居中元素的解決方案。如果我們知道元素的尺寸,乙個典型的解決方案是使用負外邊距移動自身距離高與寬的一半,如下所示:
.foo
使用 calc() 函式,我們僅僅通過 top 與 left 屬性便能實現相同的效果:
.foo
flexbox 的介入,已經很少需要這種方法了。不過,一些情況下 flexbox 不能被使用。比如,元素需要絕對定位或者固定定位,這種方法是有用的。
example 2 - 建立根柵格尺寸
使用 rem,calc() 函式能夠用來建立乙個基於視口的柵格。我們可以設定根元素的字型大小為視口寬度的一部分。
html
現在,1rem 為視口寬度的 1/30。在頁面上的任何文字,將會根據你的視口自動縮放。更進一步,相同比例的視口總會顯示相同的文字數量,不管視口的真實尺寸是多少。
如果我們對非文字使用 rem 設定大小,它們同樣遵守這個行為。乙個 1rem 寬度的元素總是視口元素寬度的 1/30。
example 3 - 清晰度
最後,calc()使計算更加清晰。如果你使一組專案為它們父元素容器寬度的 1/6,你可能這麼寫:
.foo
然而,它能夠更加清晰並具有可讀性:
.foo
使用 calc(),我們還能做更多的事情,比如建立乙個柵格系統。它是 css 最有用的新特性之一。 關於css calc函式的一些說明
calc函式,主要作用是用於動態計算長度,例如 width calc 100 50px 上面這句話代表寬度width為瀏覽器可視區域寬度減去50px。calc可以用於某些不好計算的數值。calc函式很多瀏覽器都已經相容了 calc支援 操作符,它允許使用數學表示式。注意 calc函式 裡面的操作符必...
函式的用法 INDEXC函式的用法
1 製作小 箱 如何利用excel製作簡單的小 箱?這裡與大家分享借用index函式來實現。在單元格中輸入公式 index a2 a17,randbetween 2,counta a2 a17 公式說明 counta函式表示統計非空單元格格式 randbetween函式表示隨機生成整數 2 隔行提取...
函式的用法 CELL函式高階用法,
資料多時看的眼花繚亂,使用聚光燈功能突出顯示當前的行和列,在檢視資料時非常方便,wps是自帶該功能的。選中要設定的資料區域,在 開始 選項卡下點 條件格式 選擇 新建規則 在彈出的 新建格式規則 視窗中選擇 使用公式確定要設定格式的單元格 在 為符合此公式的值設定格式 下輸入公式 or cell r...