日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使用內(nèi)聯(lián)的CSS變量技巧，提高靈巧布局效率！

有些情況下，我需要用一種簡單的方法來創(chuàng)建網(wǎng)格布局。例如，每次我改變主意時，在不修改CSS的情況下快速畫出五列網(wǎng)格。在本文中，我們一起探索一些用例，并思考如果實現(xiàn)及使用它們。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、網(wǎng)站設(shè)計、荔灣網(wǎng)絡(luò)推廣、小程序開發(fā)、荔灣網(wǎng)絡(luò)營銷、荔灣企業(yè)策劃、荔灣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供荔灣建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

它是怎么工作的

在深入探討這些概念之前，首先我們來回顧一下 CSS 變量的基礎(chǔ)知識， 我們也可以將它稱為“自定義屬性”。

所有主流瀏覽器都支持CSS變量，下面是各個瀏覽器的支持情況：

如果要定義CSS變量是全局變量，則需要將其添加到:root聲明中(:root等效于)。如果該變量特定于組件，則可以在該組內(nèi)聲明中定義它。

在下面的例子中，我定義了一個全局變量--size，它用于square 元素的寬度和高度。

 
 
 
 
    
  
  
  
  
  1. :root { 
    2. 
  
  
  
  
  2.     --size: 50px; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. .square { 
    6. 
  
  
  
  
  6.     width: var(--size); 
    7. 
  
  
  
  
  7.     height: var(--size); 
    8. 
  
  
  
  
  8. } 
    9.

如果--size沒有定義，要怎么辦呢?在傳遞的變量無效的情況下，CSS 支持定義默認變量或回退變量。

在下面的例子中的 var(--size, 10px)。如果--size無效，則寬度和高度值將為10px。

 
 
 
 
    
  
  
  
  
  1. .square { 
    2. 
  
  
  
  
  2.     width: var(--size, 10px); 
    3. 
  
  
  
  
  3.     height: var(--size, 10px); 
    4. 
  
  
  
  
  4. } 
    5.

除此之外，還可以在內(nèi)聯(lián)CSS樣式中使用CSS變量。例如

HTML
 

 

CSS

 
 
 
 
    
  
  
  
  
  1. .elem { 
    2. 
  
  
  
  
  2.     background: var(--background); 
    3. 
  
  
  
  
  3. } 
    4.

接著， 我們以上述這些概念，還演示一些事例。

CSS網(wǎng)格

示例側(cè)邊欄和主內(nèi)容

在此設(shè)計中，我將CSS網(wǎng)格用于以下各項：

  1. 邊欄和主菜單
  2. 表單項
  3. 三列布局

側(cè)邊欄的寬度是固定的，主內(nèi)容是變化。假設(shè)側(cè)邊欄的寬度是240px。

1.邊欄和主菜單

Html

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3.     
     
    4.
 

Html

 
 
 
 
    
  
  
  
  
  1. .o-grid { 
    2. 
  
  
  
  
  2.     display: grid; 
    3. 
  
  
  
  
  3.     grid-template-columns: var(--columns); 
    4. 
  
  
  
  
  4. } 
    5.

2. 表單項

按照設(shè)計，每行有兩列，html 結(jié)構(gòu)如下：

Html

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   
 
  •   
    •  
  •   
    •  
  •   
    •  
  •  

           

    CSS

     
 
 
 
      
  
  
  
  
    1. .o-grid { 
      2. 
  
  
  
  
    2.     display: grid; 
      3. 
  
  
  
  
    3.     grid-template-columns: var(--columns); 
      4. 
  
  
  
  
    4. } 
      5.

    3. 三列布局

    在下面的示例中，我添加了--repeat-number：3和--gap：8px作為內(nèi)聯(lián)CSS。這些變量將添加到o-grid類，網(wǎng)格的設(shè)置將基于這些變量。

    HTML

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   
       
      3. 
  
  
  
  
    3.   
       
      4. 
  
  
  
  
    4.   
       
      5.
     

         

    CSS

     
 
 
 
      
  
  
  
  
    1. .o-grid { 
      2. 
  
  
  
  
    2.   display: grid; 
      3. 
  
  
  
  
    3.   grid-template-columns: repeat(var(--repeat-number), 1fr); 
      4. 
  
  
  
  
    4.   grid-gap: var(--gap, 0); 
      5. 
  
  
  
  
    5. } 
      6.

    我喜歡在CSS變量中添加默認值，以防變量沒有被設(shè)置。在上面的代碼中，我使用了var(--gap, 0)，如果使用者沒有提供--gap變量，則其默認值將為0。

    動態(tài)網(wǎng)格項：minmax

    對我來說，這是一個廣泛使用的用例，并且非常重要。我經(jīng)常使用Grid minmax，但是當(dāng)我在多個頁面上使用它時，我遇到了一個問題。

    讓我們舉一個不使用 CSS 變量的基本示例。

    在 CSS 中，我使用minmax為每個網(wǎng)格項目定義最小寬度250px。

    CSS

     
 
 
 
      
  
  
  
  
    1. .o-grid { 
      2. 
  
  
  
  
    2.   display: grid; 
      3. 
  
  
  
  
    3.   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr); 
      4. 
  
  
  
  
    4.   grid-gap: 16px; 
      5. 
  
  
  
  
    5. } 
      6.

    現(xiàn)在，如果設(shè)計要求網(wǎng)格項目的寬度至少為300px，應(yīng)該怎么做?我需要創(chuàng)建類似以下版本嗎?

     
 
 
 
      
  
  
  
  
    1. .o-grid--2 { 
      2. 
  
  
  
  
    2.     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
      3. 
  
  
  
  
    3. } 
      4.

    想象一下，有五個不同的網(wǎng)格，每個網(wǎng)格具有不同的項目寬度，所以以上不是正確的解決方案。

    使用CSS變量，我可以執(zhí)行以下操作

     
 
 
 
      
  
  
  
  
    1. .o-grid { 
      2. 
  
  
  
  
    2.     display: grid; 
      3. 
  
  
  
  
    3.     grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr); 
      4. 
  
  
  
  
    4.     grid-gap: var(--gap); 
      5. 
  
  
  
  
    5. } 
      6.

    在HTML中，就可以在標(biāo)簽上設(shè)置 CSS 變量：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.      
       
      4. 
  
  
  
  
    4.      
       
      5. 
  
  
  
  
    5.      
       
      6.
     
  •  
  •  
  •  
  •      
     
  •      
     
  •      
     
  •  
  •  
  •  
  •  
  •      
     
  •      
     
  •      
     
  •  

                     

    事例源碼：https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4

    Flexbox示例

    在示例中，有一個文章標(biāo)題，其中包含作者姓名和標(biāo)簽。這些在頁面中的排布方式是動態(tài)變化，所以需要一種快速切換這些布局方式的方法 。

    HTML

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.     
      Article title
       
      3. 
  
  
  
  
    3.      
      4. 
  
  
  
  
    4.         
      By Ahmad Shadeed
       
      5. 
  
  
  
  
    5.         
      Published under: CSS, Design
       
      6. 
  
  
  
  
    6.     
     
  •  

    • CSS

     
 
 
 
      
  
  
  
  
    1. .article-header__meta { 
      2. 
  
  
  
  
    2.     display: flex; 
      3. 
  
  
  
  
    3.     justify-content: var(--justify); 
      4. 
  
  
  
  
    4. } 
      5.

    有了它，我可以調(diào)整內(nèi)聯(lián)樣式以將值更改為另一個關(guān)鍵字。我發(fā)現(xiàn)這在進行快速原型制作甚至是制作網(wǎng)站時很有用。

    按鈕

    按鈕寬度

    CSS 變量也適用于按鈕元素。假設(shè)有一個帶有兩個input字段和一個按鈕的表單。

    我的目的是通過使用內(nèi)聯(lián)CSS變量來控制按鈕的寬度。有時，按鈕應(yīng)占據(jù)其父控件的100%寬度。

    html

     
 
 
 
      
  
  
  
  
    1. Submit 
      2.

    css

     
 
 
 
      
  
  
  
  
    1. .c-button { 
      2. 
  
  
  
  
    2.     /* Other styles */ 
      3. 
  
  
  
  
    3.     width: var(--width, initial); 
      4. 
  
  
  
  
    4. } 
      5.

    按鈕顏色

    另一個有用的用途是當(dāng)有重影按鈕(輪廓按鈕)時。按鈕的顏色可以是任何顏色，通過使用CSS變量，可以輕松更改顏色。

    HTML

     
 
 
 
      
  
  
  
  
    1. Save Edits 
      2. 
  
  
  
  
    2. Delete 
      3.

    CSS

     
 
 
 
      
  
  
  
  
    1. .c-button--ghost { 
      2. 
  
  
  
  
    2.   /* Other styles */ 
      3. 
  
  
  
  
    3.   background: transparent; 
      4. 
  
  
  
  
    4.   color: var(--color, #000); 
      5. 
  
  
  
  
    5.   border-color: currentColor; 
      6. 
  
  
  
  
    6. } 
      7.

    CSS 變量同樣適合懸停效果。懸停時，按鈕背景將變?yōu)榧兩⑶易煮w顏色為白色。

    事例源碼：https://codepen.io/shadeed/pen/f8e6969d5145d4dcd81aacf7a037c995

    用戶頭像

    每個角色的大小都不同，這非常適合用 CSS 變量來解決。假設(shè)有四個不同大小的用戶頭像。

    在CSS中，定義了以下樣式：

     
 
 
 
      
  
  
  
  
    1. .c-avatar { 
      2. 
  
  
  
  
    2.   display: inline-block; 
      3. 
  
  
  
  
    3.   margin-right: 2rem; 
      4. 
  
  
  
  
    4.   width: calc(var(--size, 1) * 30px); 
      5. 
  
  
  
  
    5.   height: calc(var(--size, 1) * 30px); 
      6. 
  
  
  
  
    6.   object-fit: cover; 
      7. 
  
  
  
  
    7.   border-radius: 50%; 
      8. 
  
  
  
  
    8.   box-shadow: 0 3px 10px 0 rgba(#000, 0.2); 
      9. 
  
  
  
  
    9. } 
      10.

    通過使用Calc()函數(shù)，我可以傳遞一個--size 變量，它將乘以一個基本寬度值，在HTML中定義 --size變量：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5.

    事例源碼：https://codepen.io/shadeed/pen/cdaac5ff667e1f7d9c8241655441f10d

    作者：Ahmad shaded 譯者：前端小智 來源：sitepoint

    原文：https://css-tricks.com/patterns-for-practical-css-custom-properties-use/

    本文轉(zhuǎn)載自微信公眾號「 大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系 大遷世界公眾號。


    當(dāng)前標(biāo)題：使用內(nèi)聯(lián)的CSS變量技巧，提高靈巧布局效率！
    文章源于：http://m.5511xx.com/article/cdhspij.html

    其他資訊