CSS3-其它特性

何北木發表於2020-11-27
CSSS3

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)
// 運算子兩邊留空格

相關文章