CSS3-其它特性

何北木發表於2020-11-27

1. web字型和字型圖示

1.1 web字型

概述:使用者電腦上沒有安裝相應字型,強制讓使用者下載該字型(瀏覽器臨時性自動下載網頁編寫者給定在CSS中的字型檔案)

步驟:

  1. 提供需要生成字型字型檔案內容

  2. 使用網路資源生成web字型,然後下載並解壓到本地;如阿里巴巴icofont字型圖示網站

  3. 把解壓的字型檔案複製到,專案的font資料夾

  4. 把下載到的字型程式碼複製到css檔案中

    /*程式碼格式:*/
    @font-face{
        font-family:"字型名";
        src:url("字型檔案路徑");
    }
    /*注:因為字型檔案放在font資料夾中,所有一定要更改程式碼裡面的路徑,一般前面加上 ./font/*/
  1. 建立類樣式,並把類樣式新增給需要的元素
    .myFont{
        font-family:iconfont;
    }

1.2 字型圖示

概述:常見的是把網頁常用的一些小的圖示,藉助工具幫我們生成一個字型包,然後就可以像使用文字一樣使用圖示了

步驟

  1. 使用網路資源找到需要的字型圖示,然後下載並解壓到本地;如阿里巴巴icofont字型圖示網站

  2. 把解壓的字型檔案複製到,專案的font資料夾

  3. 把下載到的字型程式碼複製到css檔案

    /*程式碼格式:*/
    @font-face{
        font-family:"iconfont";
        src:url("字型檔案路徑");
    }
    /*注:因為字型檔案放在font資料夾中,所有一定要更改程式碼裡面的路徑,一般前面加上 ./font/*/
  1. 建立類樣式,並把類樣式新增給需要的元素
    .myFont{
        font-family:iconfont;
    }
  1. 給需要字型圖示的元素,生成一個偽元素,設定字型圖示
    .myFont::before{
        /*把16進位制的字型編碼""寫成以下格式*/
        content:"\e620";
        /*可以自由新增字型樣式 */
        font-size:20px;
        ....
    }

2. 多列布局(文字)

概述: CSS3中新出現的多列布局(multi-column)是傳統HTML網頁中塊狀佈局模式的有力擴充。這種新語法能夠讓WEB開發人
           員輕鬆的讓文字呈現多列顯示

常用屬性(設定多列布局):

 1. column-count: 屬性設定列的具體個數
       如:column-count:3;
       注:會根據列的個數均分元素空間

    2. column-width: 屬性控制列的寬度
       如: column-width:200px;
       注意:a).當指定了列的個數和寬度時,原則上取大優先
            b).如果設定的寬度更大,則取寬度,用元素總寬度/設定的寬度,重新生成列數,
            c).但是會填充整個元素,意味最終的寬度可能會大於設定的寬度  
            d).如果設定的寬度小於生成列數形成的寬度,則使用列數生成的寬度

    3. column-gap: 兩列之間的縫隙間隔
       column-gap:50px;

    4. column-rule: 規定列之間的寬度、樣式和顏色,與設定邊框樣式一樣
       column-rule: 1px dashed #000; 

    5. column-span: 規定元素應橫跨多少列,只有兩個引數:1(1)、all(跨所有列)
       一般如文字標題,放在最頂部,橫跨所有列

3. CSS3 新增的的計算屬性

  1. calc() 是css3的一個新增的功能,用來指定元素的長度。
  2. calc() 可以元素的border、margin、pading、font-size和width等屬性設定動態值
    .wrappers { 
    	height: calc(100% - 93px);
     } 
     // 這裡的 100% 相對於父元素,calc 方法內部可以做計算,注意運算子兩邊要留一個空格
    

4. vh 單位

  1. vh 是相對於視口的單位
    .wrappers { 
    	height: 100vh;
     } 
     // 100vh 表示,相對於視口的 100%	
    

5. 圖片模糊

  1. filter屬性將模糊或顏色偏移等圖形效果應用於元素
    filter: blur(5px)
    // blur模糊處理,值越大越模糊
    

6. calc()函式

  1. calc()計算屬性值
    width: calc(100% - 80px)
    // 運算子兩邊留空格
    

相關文章