CSS3-其它特性

1. web字体和字体图标

1.1 web字体

概述：用户电脑上没有安装相应字体，强制让用户下载该字体（浏览器临时性自动下载网页编写者给定在CSS中的字体文件）

步骤：

1. 提供需要生成字体的字体文件内容

2. 使用网络资源生成web字体,然后下载并解压到本地;如阿里巴巴icofont字体图标网站

3. 把解压的字体文件复制到,项目的font文件夹中

4. 把下载到的字体代码复制到css文件中

    /*代码格式：*/
    @font-face{
        font-family:"字体名";
        src：url("字体文件路径");
    }
    /*注：因为字体文件放在font文件夹中，所有一定要更改代码里面的路径，一般前面加上 ./font/*/

5. 创建类样式，并把类样式添加给需要的元素

    .myFont{
        font-family:iconfont;
    }

1.2 字体图标

概述：常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了

步骤

1. 使用网络资源找到需要的字体图标,然后下载并解压到本地;如阿里巴巴icofont字体图标网站

2. 把解压的字体文件复制到,项目的font文件夹中

3. 把下载到的字体代码复制到css文件中

    /*代码格式：*/
    @font-face{
        font-family:"iconfont";
        src：url("字体文件路径");
    }
    /*注：因为字体文件放在font文件夹中，所有一定要更改代码里面的路径，一般前面加上 ./font/*/

4. 创建类样式，并把类样式添加给需要的元素

    .myFont{
        font-family:iconfont;
    }

5. 给需要字体图标的元素，生成一个伪元素，设置字体图标

    .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)
   // 运算符两边留空格