本篇文章为 CSS 基础系列笔记第七篇，参考黑马程序员pink老师前端入门教程

其他CSS基础相关文章：

CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表

CSS基础「二」复合选择器 / 元素显示模式 / 背景 / 三大特性

CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影

CSS基础「四」浮动 \ 常见网页布局

CSS基础「五」定位

CSS基础「六」元素的显示与隐藏

1. 精灵图

1.1 为什么需要精灵图

精灵图的由来

一个网站的页面需要大量的小图片或者小图标，但是大量的图片如果放在服务器上，每次当打开网站并且向服务器发送请求，那么请求的次数将大大增加

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

核心原理

将众多小图标合并到同一张图上，用来减轻 http 请求压力
然后通过操作 CSS 的 background 属性，控制背景的位置以及大小，来展示需要的部分

精灵技术目的

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

精灵图示例

1.2 精灵图（sprites）的使用

使用精灵图核心：

精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中
这个大图片也称为精灵图或雪碧图
移动背景图片位置，此时可以使用 background-position
移动的距离就是这个目标图片的 x 和 y 坐标
一般情况下都是往上往左移动，所以数值是负值
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

1.3 案例：拼出自己的名字

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>利用精灵图拼出自己的名字</title><style>span {display: inline-block;background: url(images/abcd.jpg) no-repeat;}.b {width: 104px;height: 110px;/* background-color: skyblue; */background-position: -118PX -11PX;}.y {width: 113px;height: 113px;background-position: -366PX -556PX;}.t {width: 108px;height: 113px;background-position: -368PX -416PX;}.e {width: 97px;height: 110px;background-position: -484PX -8PX;}</style>
</head><body><span class="b"></span><span class="y"></span><span class="t"></span><span class="e"></span>
</body></html>

2. 字体图标

2.1 字体图标的产生

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

可能有人会问：为什么这些小图标不用精灵图呢？因此，下面说一下精灵图的缺点：

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

此时，有一种技术的出现很好的解决了以上问题，就是 字体图标 iconfont

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

2.2 字体图标的优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标马上就会渲染出来，减少了服务器的请求
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎兼容所有的浏览器，可以放心使用

注意：

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

总结：

如果遇到一些结构和样式比较简单的小图标，就用字体图标
如果遇到一些结构和样式复杂一点的小图片，就用精灵图

2.3 字体图标的下载

字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为：

字体图标的下载

字体图标的引入（引入到我们html页面中）

字体图标的追加（以后添加新的小图标）

推荐下载网站：

icomoon 字库 http://icomoon.io
IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
阿里 iconfont 字库 http://www.iconfont.cn/
这个是阿里 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里图标库。可以使用 AI 制作图标上传生成。重点是，免费！

icomoon 字库下载步骤如下：

2.4 字体图标的引入

具体操作步骤如下：

把下载包里面的 fonts 文件夹放入页面根目录下
在 CSS 样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中引入下述代码

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

html 标签内添加小图标

 <span></span>

给标签定义字体

span {font-family: "icomoon";
}

务必保证这个字体和上面 @font-face 里面的字体保持一致

2.5 字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中

打开 icomoon 字库 http://icomoon.io 网页
把压缩包里面的 selection.json 重新上传
选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可

3. CSS三角形制作

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标

制作三角的原理：将一个宽高为0的盒子设置不同颜色的边框，可以发现边框如下图所示，为四个不同颜色的等腰三角形。因此如果我们将其中三个边框设置为透明颜色transparent，即可制作出一个三角形

下面制作一个简单的三角形

三角形的大小取决于边框的粗细
考虑到照顾浏览器的兼容性，需要另加两行代码

  line-height: 0;font-size: 0;

案例：会话框制作

4. CSS 用户界面样式

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

更改用户的鼠标样式

表单轮廓

防止表单域拖拽

4.1 鼠标样式 cursor

li {cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状，常用属性值如下

属性值	说明
default	默认
pointer	手掌
move	移动
text	文本
not-allowed	禁止

4.2 轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的黑色边框

4.3 防止拖拽文本域 resize

不加修饰的文本域可以被拖拽，而实际开发中，我们文本域右下角是不可以拖拽的。这里可以使用resize: none; 来设置

5. vertical-align 属性应用

CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效

vertical-align : baseline | top | middle | bottom

属性值	说明
baseline	默认，元素放置在父元素的基线上
top	元素的顶端与行中最高元素的顶端对齐
middle	元素放置在父元素的中部
bottom	元素的顶端与行中最低元素的顶端对齐

5.1 图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐

以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直
居中对齐

5.2 解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

主要解决方法有两种：

给图片添加 vertical-align:middle | top | bottom 等（提倡使用的）
把图片转换为块级元素 display: block;

6. 溢出的文字省略号显示

单行文本溢出显示省略号
多行文本溢出显示省略号

1、单行文本溢出显示省略号——必须满足三个条件

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

2、多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

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

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单

7. 常见布局技巧

7.1 margin负值的运用

为了避免两个紧挨的盒子边框重叠，可以使用margin负值压住相邻盒子边框

7.2 文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

7.3 行内块巧妙运用

跳转页码的制作：页码在中间显示

把这些链接盒子转换为行内块display: inline-block;
利用行内块元素中间有缝隙，并且给父级添加 text-align:center; ，则里面的行内块元素都会水平居中对齐

7.4 CSS 三角形强化

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

直角三角形制作

京东秒杀标签实现代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.price {width: 160px;height: 24px;border: 1px solid red;/* 行高、字体大小等关于字体的属性都会继承 */line-height: 24px;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;color: #fff;font-weight: 700;}.miaosha i {position: absolute;right: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 8px 0px 0px;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}</style>
</head><body><div class="price"><span class="miaosha">￥3599<i></i></span><span class="origin">￥3999</span></div>
</body></html>

8. CSS 初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，需要对 CSS 初始化

下面给出京东首页初始化代码，并进行分析

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0}em,i {font-style: normal}li {list-style: none}img {border: 0;  /*为了照顾部分浏览器图片外面包含链接会有边框的问题*/vertical-align: middle  /*防止图片底侧有空白缝隙*/}button {cursor: pointer}a {color: #666;text-decoration: none}a:hover {color: #c81623}button,input {/*"\5B8B\4F53"就是宋体的意思，这样写兼容性好*/font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif}body {-webkit-font-smoothing: antialiased; /* CSS3写法：抗锯齿性，让文字显示的更加清晰 */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}</style>
</head><body></body></html>

这里还需注意中文字体名称问题

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题
比如：黑体 \9ED1\4F53 ；宋体 \5B8B\4F53 ；微软雅黑 \5FAE\8F6F\96C5\9ED1

CSS基础和提高部分到此结束，下面介绍 HTML5 和 CSS3 提高部分。感谢阅读

CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化相关推荐

CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
CSS基础「六」元素的显示与隐藏
本篇文章为 CSS 基础系列笔记第六篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS基础「五」定位
本篇文章为 CSS 基础系列笔记第五篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS基础「四」浮动 \ 常见网页布局
本篇文章为 CSS 基础系列笔记第四篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS基础「二」复合选择器 / 元素显示模式 / 背景 / 三大特性
本篇文章为 CSS 基础系列笔记第二篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 ...
CSS / 精灵图+字体图标
目录精灵图字体图标字体图标的使用字体图标的追加字体图标加载的原理精灵图当网页中的图像过多,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,大大降低页面的加载速度为了有效地减 ...
【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化思 ...
【CSS基础学习笔记】精灵图、字体图标、三角形、样式优化
精灵图 CSS精灵技术:能有效地减少服务器接收和发送请求的次数,提高页面的加载速度. 核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了.(主要针对小的背景图片,因为 ...

CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化