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

最新推荐文章于 2022-11-02 17:38:00 发布

Graskli

最新推荐文章于 2022-11-02 17:38:00 发布

阅读量756

点赞数

分类专栏：【前端】HTML CSS JS 基础文章标签： html 前端

本文链接：https://blog.csdn.net/m0_57265007/article/details/127175390

版权

【前端】HTML CSS JS 基础专栏收录该内容

30 篇文章 5 订阅

订阅专栏

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

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

Alibaba字体图标 · 使用FontClass图标

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

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

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

| 网页初始化

| 精灵图

简介

使用

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

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

<!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>

| 字体图标（重要）

简介

字体图标是什么

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

Alibaba 字体图标 · 下载

Alibaba矢量图标库

把想要的图标加入购物车

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

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

Alibaba 字体图标 · 引入

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

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

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

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

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

把这段代码添加到Html中

<script src="iconfont/iconfont.js"></script>

加入通用CSS代码

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

使用图标

<span>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xuexijihuashijian"></use>
        </svg>
</span>

效果与完整代码

网页

源码

<!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图标）

<style>
    /* blogbox的入口图标内容 */
    .blogenter .blogbox .entericon {
        text-align: center;
        line-height: 300px;

        font-size: 200px;
    }
</style>			


<html>
    <!-- 标题 -->
    <div class="title">
        <p style="display: inline;">Enter myBlog</p>
    </div>

    <!-- 盒子内容 -->
    <div class="blogbox">
        <div class="entericon">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-enterBlogIcon"></use>
            </svg>
        </div>
    </div>
</html>

Alibaba字体图标 · 使用FontClass图标

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

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

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

 <!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>

总结

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

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

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

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

| 三角

CSS绘制三角形

<!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外侧的垂直距离）
把另外三个变改成透明，即可得到三角形

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

.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;
        }

| 用户界面样式

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

更改用户的鼠标样式 cursor

语法

cursor: 属性值