CSS学习第七篇
- [1. CSS高级技巧目录](#1. CSS高级技巧目录)
- [2. 精灵图](#2. 精灵图)
-
- [2.1 为什么需要精灵技术](#2.1 为什么需要精灵技术)
- [2.2 精灵图使用（原理）](#2.2 精灵图使用（原理）)
- [2.3 精灵图使用（代码）](#2.3 精灵图使用（代码）)
- [3. 字体图标](#3. 字体图标)
-
- [3.1 字体图标产生和优点](#3.1 字体图标产生和优点)
- [3.2 字体图标下载](#3.2 字体图标下载)
- [3.3 字体图标的使用](#3.3 字体图标的使用)
- [3.4 字体图标的追加+加载原理](#3.4 字体图标的追加+加载原理)
- [4. CSS三角与用户界面样式](#4. CSS三角与用户界面样式)
-
- [4.1 CSS三角的做法](#4.1 CSS三角的做法)
- [4.2 CSS三角应用---京东效果](#4.2 CSS三角应用—京东效果)
- [4.3 用户界面------鼠标样式](#4.3 用户界面——鼠标样式)
- [4.4 用户界面------取消表单轮廓和防止拖拽文本域](#4.4 用户界面——取消表单轮廓和防止拖拽文本域)
- 5.行内元素与文本溢出技巧
-
- [5.1 vertical-align实现行内块和文字垂直居中对齐](#5.1 vertical-align实现行内块和文字垂直居中对齐)
- [5.2 图片底侧空白缝隙解决方案](#5.2 图片底侧空白缝隙解决方案)
- [5.3 单行文字溢出省略号显示](#5.3 单行文字溢出省略号显示)
- [5.4 多行文字溢出省略号显示](#5.4 多行文字溢出省略号显示)
- [6. 布局技巧](#6. 布局技巧)
-
- [6.1 margin负值巧妙运用](#6.1 margin负值巧妙运用)
- [6.2 文字围绕浮动元素巧妙运用](#6.2 文字围绕浮动元素巧妙运用)
- [6.3 行内块的巧妙运用](#6.3 行内块的巧妙运用)
- [6.4 CSS三角运用](#6.4 CSS三角运用)
- [7. CSS初始化](#7. CSS初始化)
1. CSS高级技巧目录
2. 精灵图
2.1 为什么需要精灵技术
其实，我们的网站（我们写的网页）是要放到这个远程的服务器里面的。这样呢，任何一个人只要能上网，打开浏览器，输入我们的网址就可以看到我们的网页了。
以前，我们的网速是非常慢的。所以尽量把图片切得小一点，在访问的时候加载的速度会更快一些。
这是以前的做法，但是现在我们是不是已经进入了5G时代，网速已经不是事了。这个时候呢，我们会考虑到另外一个问题：
用户在浏览器中访问我们的网页中，我们的网页是不是有很多的图片呀，这个时候呢如果他恰巧需要用到这张图片，我们的浏览器就会发送一个请求给服务器，服务器这个时候呢这个图片就会返回给我们的浏览器，浏览器就可以把它显示出来的。
但是呢我的页面中是不是用到许多图片呀，就要发送多次请求给服务器，就会造成服务器压力过大。
解决方案：精灵图
CSS的精灵技术
我们用CSS精灵技术的目的是为了有效地减少服务器接收和发送请求的次数，从而提高页面的加载速度，使得我们的服务器的压力就会变得更小一些。
2.2 精灵图使用（原理）
精灵技术主要针对的是背景图片的使用。我们可以把多个小的背景图片呢整合到一张大图片当中。
那些插入图片、产品类 的图片，我们是不需要做精灵技术的。因为那些图片可能会经常的去更换。比如今天上了新产品呀，那原先的老产品就要去下线。
（借助fireworks进行切图）
总结：
2.3 精灵图使用（代码）
使用fw切片工具：
代码：效果：
3. 字体图标
3.1 字体图标产生和优点
小图标：
字体可以变换大小和颜色。
字体图标的优点：
总结：
3.2 字体图标下载
字体图标下载
下载网站
3.3 字体图标的使用
（1）下载
（2）引入
（3）使用
图标去网站里复制：
效果：
网站：
3.4 字体图标的追加+加载原理
追加：
进入网站：然后重新下载替换原来的即可。
字体图标的加载原理 同精灵图 ：
4. CSS三角与用户界面样式
4.1 CSS三角的做法
网页三角：
实现效果：
实操：
4.2 CSS三角应用---京东效果
需要实现的效果：（连在一起的）
实操：
4.3 用户界面------鼠标样式
CSS用户界面样式：
鼠标样式：
实操：
4.4 用户界面------取消表单轮廓和防止拖拽文本域
取消表单轮廓：
防止拖拽文本域：（代码尽量写一行，否则会有空白行）
5.行内元素与文本溢出技巧
5.1 vertical-align实现行内块和文字垂直居中对齐
垂直对齐：
值介绍：
默认是基线对齐：可以改为垂直居中对齐：
实操：
效果：
5.2 图片底侧空白缝隙解决方案
图片与边框会有缝隙：
由来：图片与文字是基线对齐的。
解决方案：
5.3 单行文字溢出省略号显示
文字溢出省略号显示：
首先来看单行，必须满足三个条件：
实操：
5.4 多行文字溢出省略号显示
多行文字：
实操：
实际开发：
6. 布局技巧
6.1 margin负值巧妙运用
如果两个盒子左右排列，那么相邻的边框会叠加变粗
但有了margin负值就可以解决这个问题。
实操：
如果还想实现：鼠标经过某个边框则边框出现别的颜色实操：
6.2 文字围绕浮动元素巧妙运用
实现效果：
代码：（添加浮动）样式代码：
6.3 行内块的巧妙运用
行内块的巧妙运用：
实操：
6.4 CSS三角运用
CSS三角：（上右下左）
7. CSS初始化
CSS初始化
