<samp id="tdkee"></samp>

    <mark id="tdkee"><acronym id="tdkee"></acronym></mark>

  1. 免费看又黄又无码的网站_久久久高清国产免费观看_亚洲一区二区三区在线免费观看_免费欧洲美女a视频一级毛片_日本最新免费二区三区

    ×

    使用內(nèi)聯(lián)的 CSS 變量技巧,提高靈巧布局效率!

    分類:互聯(lián)網(wǎng)熱點 編輯:it知事 瀏覽量:2
    2020-07-13 16:55:23

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

    它是怎么工作的

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

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

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

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

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

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

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

    HTML

    CSS

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

    CSS網(wǎng)格

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

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

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

    1.邊欄和主菜單

    Html

    Html

    2. 表單項

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

    Html

    CSS

    3. 三列布局

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

    HTML

    CSS

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

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

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

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

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

    CSS

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

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

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

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

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

    Flexbox示例

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

    HTML

    CSS

    有了它,我可以調(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

    css

    按鈕顏色

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

    HTML

    CSS

    CSS 變量同樣適合懸停效果。懸停時,按鈕背景將變?yōu)榧兩?,并且字體顏色為白色。

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

    用戶頭像

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

    在CSS中,定義了以下樣式:

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

    事例源碼: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)系 大遷世界公眾號。

    【編輯推薦】

    這些 CSS 偽類,你可能還不知道,可以用起來了! 3年開發(fā)中遇到的 CSS 問題及解決方案,有大佬幫他總結(jié)好了 ! 在這3年開發(fā)中遇到的 CSS 問題及解決方案,有大佬幫他總結(jié)好了 11種最佳CSS框架 CSS Viewport 單位,很多人還不知道使用它來快速布局!
    【責(zé)任編輯:武曉燕 TEL:(010)68476606】

    聲明:免責(zé)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻自行上傳,本網(wǎng)站不擁有所有權(quán),也不承認(rèn)相關(guān)法律責(zé)任。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容,請發(fā)

    送郵件至:operations@xinnet.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,本站將立刻刪除涉嫌侵權(quán)內(nèi)容。本站原創(chuàng)內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時

    需注明出處:新網(wǎng)idc知識百科

    免費咨詢獲取折扣

    Loading
    国产精品视频白浆免费视频_久久久高清国产免费观看_亚洲一区二区三区在线免费观看_免费欧洲美女a视频一级毛片

    <samp id="tdkee"></samp>

      <mark id="tdkee"><acronym id="tdkee"></acronym></mark>