DAY 9 | 自学前端第九天

pangpangcm

已于 2022-04-10 19:39:57 修改

阅读量719

点赞数 1

分类专栏：前端自学笔记文章标签： css

于 2022-04-08 23:32:10 首次发布

本文链接：https://blog.csdn.net/weixin_39108774/article/details/124048149

版权

本文详细介绍了自学前端过程中的一些CSS高级技巧，包括精灵图的原理与应用、字体图标的优点及使用方法、如何创建CSS三角形，以及CSS用户界面样式、vertical-align属性、溢出文字省略号显示和常见布局技巧。通过这些技巧，可以提升网页性能和用户体验。

摘要由CSDN通过智能技术生成

自学一定要连续，记忆点深，知识点也容易串联。

今天学习CSS高级技巧，要求：

能使用精灵图
能使用字体图标
能写出CSS三角
能写出常见的CSS用户界面样式：鼠标样式，表单轮廓去除，文本域防拖拽
vertical-align和溢出文字省略号显示
能够说出常见的布局技巧
CSS初始化

一、精灵图

1.1为什么需要精灵图

一个网页中往往应用很多小背景图作为修饰，当网页中的图像过多时，服务器就会频繁接收和发送请求图片，造成服务器请求压力过大，降低页面加载速度。

因此，为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术（也叫CSS Sprites、CSS雪碧）。

核心原理：将网页中的一些小背景图整合道一张大图中，这样服务器只需要一次请求就可以了。

应用如：王者荣耀精灵图，淘宝精灵图

1.2 精灵图（sprites）的使用

精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中；
这个大图片也称为Sprites精灵图或者雪碧图；
移动背景图片位置，此时可以用background-position；
移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同（右x 下y）；
一般情况往上和往左都是负值；
使用精灵图需要精确测量，每个小背景图片呢的大小和位置。

精灵图核心总结：

针对小背景图片
借助背景位置实现background-position
一般情况下精灵图都是负值。

 <title>精灵图使用</title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            background: url(images/index.png) no-repeat -182px 0;
            margin-left: 182px;
            /* background-position: -182px 0; */
        }

        .box2 {
            width: 235px;
            height: 130px;
            background: url(images/index.png) no-repeat 0 -218px;
        }

        .box3 {
            width: 25px;
            height: 30px;
            background: url(images/index.png) no-repeat 0 -104px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

二、字体图标

2.1字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。

精灵图缺点明显：

图片文件还是比较大的；
图片本身放大和缩小会失真；
一旦图片制作完成，想要更换非常复杂。

此时，可以解决以上问题的技术出现——字体图标 iconfont

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2.1字体图标的优点

轻量型：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，较少了服务器请求；
灵活性：随意改颜色，大小，透明效果，阴影；
兼容性：几乎支持所有浏览器，请放心使用；

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

如果遇到结构样式简单的小图标，就用字体图标；
结构样式复杂小图片，使用精灵图。

如何使用字体图标：

字体图标下载

icomoon字库 http://icomoon.io
阿里iconfont字库 http://www.iconfont.cn/

字体图标引入

把下载包里面的fonts文件夹放入页面根目录下；
在CSS样式中全局声明字体：通过CSS引入字体文件到页面中；
打开字体文件夹中的demo.html，复制右下角小方框放入span标签；
给span设置字体样式为 font-family: 'icomoon'。

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?gzpfrc');
  src:  url('fonts/icomoon.eot?gzpfrc#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?gzpfrc') format('truetype'),
    url('fonts/icomoon.woff?gzpfrc') format('woff'),
    url('fonts/icomoon.svg?gzpfrc#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}