【第二部分 | CSS】7：CSS 进阶知识

怼烎@ 2023-09-26 10:09 64阅读 0赞

--------------------

**目录**

| 精灵图

| 字体图标（重要）

简介

Alibaba 字体图标 · 下载

Alibaba 字体图标 · 引入

Alibaba字体图标 · 使用Symbol图标（推荐）

Alibaba字体图标·修改Symbol图标的样式

Alibaba字体图标 · 使用FontClass图标

总结

| 三角

CSS绘制三角形

用三角形制作一个梯形

| 用户界面样式

更改用户的鼠标样式 cursor

取消表单轮廓、防止表单拖拽

vertical-align 属性：文本与图片垂直居中对齐

vertical-align属性：消除图片边框下的空白

| 用省略号代替溢出的文字

单行文本溢出省略

\*多行溢出文本省略

| 布局技巧

盒子与盒子之间添加细线

（重点）给无width的块级元素添加text-align，居中行内块元素

| 网页初始化

--------------------

### **| 精灵图** ###

**简介**

![432550c7d63d44aab806d78cc3ab30ed.png][]

**使用**

*  如何使用？ 精灵图的使用，关键在于**移动精灵图到适当的位置，从而得到正确的图片**
 *  如何移动？ 移动背景图片位置， 此时可以使用 background-position
 *  啥坐标系？ 图片移动的坐标**坐标系需要注意： 左上角为（0,0） ， 左上角到右上角的直线向量为 x ， 左上角到左下角的直线向量为y**
 *  正移负移？ 因为**默认情况下，精灵图的左上角在原点处，因此移动的时候是向左 / 右 移动，此时相对于坐标系而言移动的是负值！**
 *  移动多少？ 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

![916d822dcba04a4880401eb8202894a2.png][]

**示例** ： 把通过“移动”，定位到“知识”，然后摆在盒子中（180 x 36） 盒子的左上角距离图片左上角的距离为（154 x 130）

![a6c588321c2d42fcbf0021a6bbc1278f.png][]

![80299ed93f7a4fb4b617ab508dda140a.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .box {
                height: 36px;
                width: 180px;
                background-image: url(imgs/spirit.jpg);
                background-position: -158px -130px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

###    **| 字体图标（重要）** ###

#### **简介** ####

**字体图标是什么**

*  字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化
 *  字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标
 *  字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体
 *  优点

![54350b95b4a948ac910ad3a777f1b1f7.png][]

![d0a5e6e59941493f82929ec100df4c71.png][]

--------------------

#### **Alibaba 字体图标 · 下载** ####

[Alibaba矢量图标库][Alibaba]

**把想要的图标加入购物车**

![48c9ac21a7e6429fbfbd937207af9a32.png][]

**点击购物车，然后点击”添加至项目“**

![b1540ea1bca7436dad1badd25c9379ea.png][]

**选择一种图标形式，并下载至本地** （不同的形式有不同的使用步骤！！！）

![03828d1ae7694ff8b140d3e59bba2a27.png][]

--------------------

#### **Alibaba 字体图标 · 引入** ####

**解压压缩包，得到最里面那一层的文件夹，改名为iconfont 放到网站的根目录下**

![3a14a13bf6184f92809bd3b237ebaa9c.png][]

--------------------

#### **Alibaba字体图标 · 使用Symbol图标（推荐）** ####

Symbol图标是当前的主流和发展趋势，并且这是国内阿里巴巴的推荐，稳定，不会在将来被墙或者过时，因此推荐。

前置步骤：把下载好的 **文件夹改名为iconfont，放在网页根路径** 中

**打开文件夹中的demo\_index.html查看图标的相关信息：不同的引用方式、字体图标代号等等**

![2cee407aea774003a05bb3e4a4471484.png][]

**把这段代码添加到Html中**

**加入通用CSS代码**

.icon {
                width: 1em;
                height: 1em;
                vertical-align: -0.15em;
                fill: currentColor;
                overflow: hidden;
            }

**使用图标**

![e2140edad327493b861873eb9ba18e4e.png][]

**效果与完整代码**

![6028ce1888204a138664acd0c01b6897.png][]

网页

![fb1f6264ff094dee9a511ba6cfc08bae.png][]

源码

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>iconfont的使用--本地引入</title>
    
        <script src="iconfont/iconfont.js"></script>
        
    	<style>        
            .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            }
    	</style>
    
    </head>
    
    
    <body>
    	<span>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xuexijihuashijian"></use>
            </svg>
        </span>
    </body>
    
    </html>

--------------------

#### **Alibaba字体图标·修改Symbol图标的样式** ####

基本思路：

*  把svg那一坨标签用一个div盒子装起来
 *  然后对装了svg的div盒子设置样式，把svg当作文本来看待，设置text-align: center; font-size:xxxpx; line-height; 等属性
 *  需要注意的是无法设置Symbol的颜色！ 颜色需要在Alibaba添加图标的时候就设置好
 *  示例（播放按钮是Symbol图标）

![82eff2d7dab0412abc5384d47eeb31f5.png][]

--------------------

#### Alibaba字体图标 · 使用FontClass图标 ####

这个是Unicode的变体。经实验，可以使用

其本质为：引入CSS外部样式、通过定义class调用外部样式的选择器，从而生成图标

![facd3087e8924fec800bbfe83e3ccab6.png][]

示例：（目录结构和上述一样）

<!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Document</title>
         <link rel="stylesheet" href="iconfont/iconfont.css">
         <style>
             
         </style>
     
     </head>
     <body>
         <span class="iconfont icon-yun"></span>
     </body>
     </html>

![9d6daebd4d2548479f6d657f68475ca2.png][]

--------------------

#### 总结 ####

*  本质：通过js 或 CSS引入外部样式，这样就可以把特殊字符转为图标了
 *  不同的网站有不同的图标引入步骤，本章介绍了Icomoon、Alibaba两个网站的图标引入方式。

其中，Icomoon介绍的是Unicode图标引入的方式；

Alibaba介绍的是FontClass图标引入方式 以及 支持多色的Symbol图标引入方式

*  请严格按照步骤进行操作。重点是字体图标文件的下载、文件夹的命名、以及代码中url的指定等等。
 *  本章仅为粗略介绍，更多知识还需要深入学习。

### | 三角 ###

#### CSS绘制三角形 ####

![a03be49e961e4a8cb31dafc05d0726ff.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .box {
                margin: 100px auto;
                
                height: 0;
                width: 0;
                
                border-right: 10px solid red;
                border-bottom: 10px solid pink;
                border-left: 10px solid green;
                border-top: 10px solid blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
    
        </div>
    </body>
    </html>

*  盒子每一边的边框都是梯形的，盒子大小为0时，梯形上底(边框内边)也为0，所以两边会合并成三角形。
 *  通过上述步骤可以画出四个三角形拼接成的正方形。 且正方形的边长为：2\*border （borde的大小实质为：图形中心到border外侧的垂直距离）
 *  把另外三个变改成透明，即可得到三角形

![418589d884b7409cad07a19a34f634ec.png][]

上述代码还可以优化一下，写成这样

.box {
                margin: 100px auto;
    
                height: 0;
                width: 0;
                
                border: 10px solid transparent;
                border-bottom: 10px solid pink;
         }

#### **用三角形制作一个梯形** ####

*  原理：矩形 + 直接三角形（关键在于直角三角形的绘制，需要理解一下三角形的绘制原理）
 *  通过下列的演示，加深对三角形绘制的原理理解

border控制圆心到对应方位边的距离大小。 transparent控制边的显示与否（等价于 white颜色）

.box1 {
                float: left;
    
                width: 0;
                height: 0;
                border-top: 100px solid transparent;
                border-right: 50px solid skyblue;
                border-bottom: 0px;
                border-left: 0px;
            }
    
            .box2 {
                float: left;
    
                /* height = border-top + border-bottom     width = border-left + border-right   */
                width: 100px;
                height: 100px;
    
                background-color: skyblue;
            }

![7c61edb2e1374685859ba8e7911aa8ad.png][]

###    **| 用户界面样式** ###

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

#### **更改用户的鼠标样式 cursor** ####

**语法**

cursor: 属性值

![0a9cf5071229490d83cbf00c704dbf39.png][]

--------------------

#### **取消表单轮廓、防止表单拖拽** ####

*  表单默认是有轮廓的 如果想取消，可以在表单域中定义如下样式： input \{outline: none; \} （input也可以换成别的表单标签）
 *  文本域textarea默认是可以拖动的 如果想取消，可以在文本域定义如下样式： textarea\{ resize: none;\}
 *  复习：文本域最好所有标签写在一行上，否则会有默认空格

--------------------

#### **vertical-align 属性：文本与图片垂直居中对齐** ####

*  使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐 用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐.
 *  用于设置一个元素的垂直对齐方式，但是它**只能针对于行内元素或者行内块元素生效**，对块级元素无法使用
 *  综上，一般 vertical-align 和 display: inline-block 搭配使用
 *  图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
    
    此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直 居中对齐了

语法：

**vertical-align : baseline | top | middle | bottom**

![d68a0fc7890c445887ea89b64509ae9e.png][]

#### vertical-align属性：消除图片边框下的空白 ####

![1a47cf1ab10f4710ab335ee2dd36129d.png][]

.box2 {
                border: 1px solid red;
            }
            
    <div class="box2">
            <img src="imgs/Pic.jpg" class="pic2">
        </div>

![27d0b974b9a14bdb8284b23af3ac098c.png][]

解决后：

![1ed7f46b0d314b8c9b300710cfbea572.png][]

.box2 {
                border: 1px solid red;
            }
    
            .pic2 {
                vertical-align: bottom;
            }
            
            
    <div class="box2">
            <img src="imgs/pic.jpg" class="pic2">
        </div>

--------------------

### | 用省略号代替溢出的文字 ###

#### 单行文本溢出省略 ####

/*1. 先强制一行内显示文本*/
     white-space: nowrap; （ 默认 normal 自动换行）
     /*2. 超出的部分隐藏*/
     overflow: hidden;
     /*3. 文字用省略号替代超出的部分*/
     text-overflow: ellipsis;

![eab82798ba6f4ae5863fecfe80e833a8.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .class {
                height: 40px;
                width: 100px;
                background-color: pink;
    
                /*1. 先强制一行内显示文本*/
                white-space: nowrap;
                /*2. 超出的部分隐藏*/
                overflow: hidden;
                /*3. 文字用省略号替代超出的部分*/
                text-overflow: ellipsis;
            }
            
        </style>
    </head>
    <body>
        <div class="class">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
    </body>
    </html>

--------------------

#### \*多行溢出文本省略 ####

添加这个代码就OK

overflow: hidden;
    text-overflow: ellipsis;
    /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 2;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;

*  多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内 核）
 *  更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

示例：（需要严格控制 显示的文本行数需要省略的那一行的字体个数，否则会出现下列情况）

![77e7ee6865574dc6ae02faca35e3c878.png][]

### | 布局技巧 ###

#### 盒子与盒子之间添加细线 ####

![60b289b88d26443583813dacf5b714dd.png][]

![083b6c7a080a4657af0b96c717cd6b46.png][]

####    （重点）给无width的块级元素添加text-align，居中行内块元素 ####

![823f7741f7bb420ba2466cd384c3dff4.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
    
            .box {
                height: 120px;
                text-align: center;
            }
    
            .class {
                display: inline-block;
                width: 100px;
                height: 100px;
                background-color: yellow;
                text-align: center;
            }
    
            .class2 {
                display: inline-block;
                width: 100px;
                height: 100px;
                background-color: saddlebrown;
                text-align: center;
            }
    
            
            
        </style>
        <title>Document</title>
    </head>
    <body>
        <div class="box">
            <div class="class"></div>
            <div class="class2"></div>
        </div>
    </body>
    </html>

![4a0e2b04405a42b29f3e212640584312.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>行内块的巧妙运用</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                text-align: center;
            }
            .box a {
                display: inline-block;
                width: 36px;
                height: 36px;
                background-color: #f7f7f7;
                border: 1px solid #ccc;
                text-align: center;
                line-height: 36px;
                text-decoration: none;
                color: #333;
                font-size: 14px;
            }
           .box .prev,
            .box .next {
                width: 85px;
            }
            .box .current,
            .box .elp {
                background-color: #fff;
                border: none;
            }
            .box input {
                height: 36px;
                width: 45px;
                border: 1px solid #ccc;
                outline: none;
            }
            .box button {
               width: 60px;
               height: 36px;
               background-color: #f7f7f7;
                border: 1px solid #ccc;
                
            }
        </style>
    </head>
    <body>
        <div class="box">
            <a href="#" class="prev"><<上一页</a>
            <a href="#" class="current">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#" class="elp">...</a>
            <a href="#" class="next">>>下一页</a>
            到第 
            <input type="text">
            页
            <button>确定</button>
        </div>
    </body>
    </html>

--------------------

### | 网页初始化 ###

*  每个浏览器的初始参数都是不同的，为了统一我们编写的样式，我们必须在一开始初始化一些常用参数。
 *  下面介绍一下初始化的常用语句（京东的初始化源码。按需CV哦）

/* 把我们所有标签的内外边距清零 */
    * {
        margin: 0;
        padding: 0
    }
    /* em 和 i 斜体的文字不倾斜 */
    em,
    i {
        font-style: normal
    }
    /* 去掉li 的小圆点 */
    li {
        list-style: none
    }
    
    img {
        /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
        border: 0;
        /* 取消图片底侧有空白缝隙的问题 */
        vertical-align: middle
    }
    
    button {
        /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
        cursor: pointer
    }
    
    a {
        color: #666;
        text-decoration: none
    }
    
    a:hover {
        color: #c81623
    }
    
    button,
    input {
        /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
        /* 把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码 */
        font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
    }
    
    body {
        /* CSS3 抗锯齿形 让文字显示的更加清晰 */
        -webkit-font-smoothing: antialiased;
        background-color: #fff;
        font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
        color: #666
    }
    
    .hide,
    .none {
        display: none
    }
    /* 清除浮动 */
    .clearfix:after {
        visibility: hidden;
        clear: both;
        display: block;
        content: ".";
        height: 0
    }
    
    .clearfix {
        *zoom: 1
    }

![cb771106c4bc4149bf42ff6e05644178.png][]

[432550c7d63d44aab806d78cc3ab30ed.png]: https://img-blog.csdnimg.cn/432550c7d63d44aab806d78cc3ab30ed.png
[916d822dcba04a4880401eb8202894a2.png]: https://img-blog.csdnimg.cn/916d822dcba04a4880401eb8202894a2.png
[a6c588321c2d42fcbf0021a6bbc1278f.png]: https://img-blog.csdnimg.cn/a6c588321c2d42fcbf0021a6bbc1278f.png
[80299ed93f7a4fb4b617ab508dda140a.png]: https://img-blog.csdnimg.cn/80299ed93f7a4fb4b617ab508dda140a.png
[54350b95b4a948ac910ad3a777f1b1f7.png]: https://img-blog.csdnimg.cn/54350b95b4a948ac910ad3a777f1b1f7.png
[d0a5e6e59941493f82929ec100df4c71.png]: https://img-blog.csdnimg.cn/d0a5e6e59941493f82929ec100df4c71.png
[Alibaba]: https://www.iconfont.cn/
[48c9ac21a7e6429fbfbd937207af9a32.png]: https://img-blog.csdnimg.cn/48c9ac21a7e6429fbfbd937207af9a32.png
[b1540ea1bca7436dad1badd25c9379ea.png]: https://img-blog.csdnimg.cn/b1540ea1bca7436dad1badd25c9379ea.png
[03828d1ae7694ff8b140d3e59bba2a27.png]: https://img-blog.csdnimg.cn/03828d1ae7694ff8b140d3e59bba2a27.png
[3a14a13bf6184f92809bd3b237ebaa9c.png]: https://img-blog.csdnimg.cn/3a14a13bf6184f92809bd3b237ebaa9c.png
[2cee407aea774003a05bb3e4a4471484.png]: https://img-blog.csdnimg.cn/2cee407aea774003a05bb3e4a4471484.png
[e2140edad327493b861873eb9ba18e4e.png]: https://img-blog.csdnimg.cn/e2140edad327493b861873eb9ba18e4e.png
[6028ce1888204a138664acd0c01b6897.png]: https://img-blog.csdnimg.cn/6028ce1888204a138664acd0c01b6897.png
[fb1f6264ff094dee9a511ba6cfc08bae.png]: https://img-blog.csdnimg.cn/fb1f6264ff094dee9a511ba6cfc08bae.png
[82eff2d7dab0412abc5384d47eeb31f5.png]: https://img-blog.csdnimg.cn/82eff2d7dab0412abc5384d47eeb31f5.png
[facd3087e8924fec800bbfe83e3ccab6.png]: https://img-blog.csdnimg.cn/facd3087e8924fec800bbfe83e3ccab6.png
[9d6daebd4d2548479f6d657f68475ca2.png]: https://img-blog.csdnimg.cn/9d6daebd4d2548479f6d657f68475ca2.png
[a03be49e961e4a8cb31dafc05d0726ff.png]: https://img-blog.csdnimg.cn/a03be49e961e4a8cb31dafc05d0726ff.png
[418589d884b7409cad07a19a34f634ec.png]: https://img-blog.csdnimg.cn/418589d884b7409cad07a19a34f634ec.png
[7c61edb2e1374685859ba8e7911aa8ad.png]: https://img-blog.csdnimg.cn/7c61edb2e1374685859ba8e7911aa8ad.png
[0a9cf5071229490d83cbf00c704dbf39.png]: https://img-blog.csdnimg.cn/0a9cf5071229490d83cbf00c704dbf39.png
[d68a0fc7890c445887ea89b64509ae9e.png]: https://img-blog.csdnimg.cn/d68a0fc7890c445887ea89b64509ae9e.png
[1a47cf1ab10f4710ab335ee2dd36129d.png]: https://img-blog.csdnimg.cn/1a47cf1ab10f4710ab335ee2dd36129d.png
[27d0b974b9a14bdb8284b23af3ac098c.png]: https://img-blog.csdnimg.cn/27d0b974b9a14bdb8284b23af3ac098c.png
[1ed7f46b0d314b8c9b300710cfbea572.png]: https://img-blog.csdnimg.cn/1ed7f46b0d314b8c9b300710cfbea572.png
[eab82798ba6f4ae5863fecfe80e833a8.png]: https://img-blog.csdnimg.cn/eab82798ba6f4ae5863fecfe80e833a8.png
[77e7ee6865574dc6ae02faca35e3c878.png]: https://img-blog.csdnimg.cn/77e7ee6865574dc6ae02faca35e3c878.png
[60b289b88d26443583813dacf5b714dd.png]: https://img-blog.csdnimg.cn/60b289b88d26443583813dacf5b714dd.png
[083b6c7a080a4657af0b96c717cd6b46.png]: https://img-blog.csdnimg.cn/083b6c7a080a4657af0b96c717cd6b46.png
[823f7741f7bb420ba2466cd384c3dff4.png]: https://img-blog.csdnimg.cn/823f7741f7bb420ba2466cd384c3dff4.png
[4a0e2b04405a42b29f3e212640584312.png]: https://img-blog.csdnimg.cn/4a0e2b04405a42b29f3e212640584312.png
[cb771106c4bc4149bf42ff6e05644178.png]: https://img-blog.csdnimg.cn/cb771106c4bc4149bf42ff6e05644178.png