自定義屬性--和calc

pepperwang 發布于2019-08-29 16:20 / 2052人閱讀

摘要：自定義屬性帶有前綴的屬性名，比如，表示的是帶有值的自定義屬性，其可以通過函數在全文檔范圍內復用的。自定義屬性是可以級聯的每一個自定義屬性可以多次出現，并且變量的值將會借助級聯算法和自定義屬性值運算出來。

>>>點擊獲取更多文章<<<

最近在弄練習寫demo11，寫到有關于 --XXX的自定義屬性，calc，平時很少用，比較生面口，于是將它mark下來。

自定義屬性 (--*)

帶有前綴--的屬性名，比如--example--name，表示的是帶有值的自定義屬性，其可以通過 var 函數在全文檔范圍內復用的。

CSS 自定義屬性是可以級聯的：每一個自定義屬性可以多次出現，并且變量的值將會借助級聯算法和自定義屬性值運算出來。

語法

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);

Link to section示例

This paragraph should have a blue background and yellow text.

This paragraph should have a yellow background and blue text.

This paragraph should have a green background and yellow text.

結果

calc 概述

CSS函數calc()可以用在任何一個需要、, 、、、或的地方。有了calc()，你就可以通過計算來決定一個CSS屬性的值了。你還可以在一個 calc() 內部嵌套另一個 calc() ，里面的 calc() 會被簡單地視為加了括號。

語法

calc(  )
where 
 =  [ [ "+" | "-" ]  ]*

where 
 =  [ "*"  | "/"  ]*

where 
 =  |  |  | (  )

/* property: calc(expression) */
width: calc(100% - 80px);

其中的表達式，可以用+(加法) -(減法) *(乘法，乘數中至少要有一個是類型的) /(除法，被除數（/右面的數）必須是類型的)。表達式中的操作數可以使用任意語法種類的長度。如果你愿意，你可以在一個表達式中混用多種不同的長度單位。在需要時，你還可以使用小括號來調整計算順序。

注意，+ 和 - 運算符的兩邊必須始終要有空白符。

例子(使用指定的外邊距定位一個對象)

使用 calc() 可以很容易的為一個對象設置一個左右兩邊相等的外邊距.在這個例子中,使用 CSS 創建了一個橫跨整個窗口的 banner,該 banner 左右兩邊各有一個距離窗口邊緣 40 像素的間距:

.banner {
    position: absolute;
/* fallback for browsers which still doesn"t support for `calc()` */
    left: 5%;
    width: 90%;
/* overwrite, if the browsers support for `calc()`*/
    left: calc(40px);
    width: calc(100% - 80px);
    border: 1px solid black;
    box-shadow: 1px 2px;
    background-color: yellow;
    padding: 6px;
    text-align: center;
}

This is a banner!

使用CSS變量來嵌套calc()

我們來看一下下面的代碼：

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

在所有的變量都被展開后, widthC 的值就會變成 calc( calc( 100px / 2) / 2)，然后當它被賦值給 .foo 的 width屬性時，所有內部的這些calc()（無論嵌套的有多深）都將會直接被“拍”成一個括號（原文：be flattened to just parentheses），所以這個 width屬性的值就直接相當于 calc( ( 100px / 2) / 2)了，或者說就變成25px了。簡而言之：一個 calc() 里面的 calc() 就僅僅相當于是一個括號。

參考來源

https://developer.mozilla.org...*

https://developer.mozilla.org...

云服務器 GPU云服務器自定義屬性值 dom自定義屬性自適應屬性屬性定義方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113685.html

CSS 自定義屬性 - 入門

摘要：變量的函數引用的自定義屬性被稱為變量。為此，可讀性和可維護性是自定義屬性最大的優勢。自定義屬性作用域在中，變量有作用域一說。因此，在選擇器中聲明的自定義屬性，其作用域的范圍是全局范圍，也就是全局作用域。引言 ??CSS語言是一種聲明式語言，不像其他語言有變量、條件和邏輯等特性，因為這個原因，社區中有了各種CSS處理器語言，比如Sass、LESS和Stylus等。這些處理器語言引入了一...

seanlook 2019-08-30 15:44 評論0 收藏0
CSS自定義變量屬性——像less，sass那樣在css中使用變量（譯）

摘要：設置值的注意事項自定義屬性可以以結尾但是解析器會自動移除這個屬性的值，并按瀑布流的形式確定其優先屬性。這里雖然有背景色的設置但是優先級并沒有自定義屬性的高，故而的背景色是透明色翻譯參考介紹通常大型文檔或者應用（甚至小規模的文檔或應用）會包括大量的CSS。在這些CSS文件中通常會有大量相同的數據；例如，一個網站可能用了一個顏色主題并反復用三到四種顏色貫穿始終。改動這些數據會非常困難并...

Backache 2019-08-01 17:39 評論0 收藏0
CSS自定義變量屬性——像less，sass那樣在css中使用變量（譯）

摘要：設置值的注意事項自定義屬性可以以結尾但是解析器會自動移除這個屬性的值，并按瀑布流的形式確定其優先屬性。這里雖然有背景色的設置但是優先級并沒有自定義屬性的高，故而的背景色是透明色翻譯參考介紹通常大型文檔或者應用（甚至小規模的文檔或應用）會包括大量的CSS。在這些CSS文件中通常會有大量相同的數據；例如，一個網站可能用了一個顏色主題并反復用三到四種顏色貫穿始終。改動這些數據會非常困難并...

王軍 2019-08-29 13:28 評論0 收藏0
FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

摘要：接著只要在中使用就能搞定自適應。代碼如下標題標題標題標題標題在上述點功能中，可以用變量解決，比如實現了寬度，高度圓點大小直徑的控件。未完待續背景如今css3越來越發達，focus-within等屬性也已經開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標簽寫出優秀的框架。通過對css3的實踐，我發現自定義原生控件并不是什么難事，...

BigTomato 2019-08-29 15:17 評論0 收藏0
FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

摘要：接著只要在中使用就能搞定自適應。代碼如下標題標題標題標題標題在上述點功能中，可以用變量解決，比如實現了寬度，高度圓點大小直徑的控件。未完待續背景如今css3越來越發達，focus-within等屬性也已經開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標簽寫出優秀的框架。通過對css3的實踐，我發現自定義原生控件并不是什么難事，...

lanffy 2019-08-26 17:29 評論0 收藏0