第15章掌握CSS——高级技巧高级技巧分为7部分，分别为CSS精灵、行内块与元素间空白问题、过渡声明块、透明声明块与轮

1 CSS精灵

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再 background-position 精确的定位出背景图片的位置。

CSS精灵

CSS 精灵的优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。浏览器与服务器的交互

CSS 精灵实现步骤：

创建盒子，盒子尺寸 与小图尺寸相同。
设置盒子背景图为精灵图。
添加 background-position 属性，改变背景图位置。
- 首先，使用 PxCook 测量小图片左上角坐标。
- 其次，取负数坐标为 background-position 属性值（向左上移动图片位置）。

2 CSS精灵案例：京东服务

2.1 视觉效果

京东服务视觉效果

2.2 准备素材

名称为sprite.png的图片，放置于当前项目根目录下。

2.3 制作思路

第1步因此建立一个类名.service的盒子来制作该项目。
第2步通过观察得知项目分包含四个部分，四个部分整齐排列在一行。
第3步在.service盒子中使用无序列表ul。
第4步清除无序列表的默认样式，设置flex布局以及主轴对齐。
第5步在每个li中使用background-img来设置背景图片，并用background-position来截取对应的图标。

2.4 编码实现

HTML标签结构

<div class="service">
  <ul>
    <li>
      <h5></h5>
      <p>品类齐全，轻松购物</p>
    </li>
    <li>
      <h5></h5>
      <p>多仓直发，极速配送</p>
    </li>
    <li>
      <h5></h5>
      <p>正品行货，精致服务</p>
    </li>
    <li>
      <h5></h5>
      <p>天天低价，畅选无忧</p>
    </li>
  </ul>
</div>

CSS外观样式

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  li {
    list-style: none;
  }

  .service {
    margin: 100px auto;
    width: 1190px;
    height: 42px;
    /* background-color: pink; */
  }

  .service ul {
    display: flex;
  }

  .service li {
    display: flex;
    padding-left: 40px;
    width: 297px;
    height: 42px;
    /* background-color: skyblue; */
  }

  .service li h5 {
    margin-right: 10px;
    width: 36px;
    height: 42px;
    /* background-color: pink; */
    background: url(./images/sprite.png) 0 -192px;
  }

  .service li:nth-child(2) h5 {
    background-position: -41px -192px;
  }

  .service li:nth-child(3) h5 {
    background-position: -82px -192px;
  }

  .service li:nth-child(4) h5 {
    background-position: -123px -192px;
  }

  .service li p {
    font-size: 18px;
    color: #444;
    font-weight: 700;
    line-height: 42px;
  }
</style>

3 字体图标

字体图标

字体图标：展示的是图标，本质是字体。

作用：
- 在网页中添加简单的、颜色单一的小图标。
- 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。
优点：
- 灵活性：灵活地修改样式，例如：尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
- 使用方便：先下载再使用

3.1 下载字体

iconfont 图标库：www.iconfont.cn/
操作：登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至本地

字体样式下载图片

3.2 使用字体

引入字体样式表（iconfont.css）

简写方式

    @font-face { 
       font-family: "iconfont"; 
       src: url('./方正手迹.ttf'); 
    }

兼容方式

 @font-face { 
   font-family: "iconfont"; 
   font-display: swap; 
   src: url('webfont.eot'); /* IE9 */     
   src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */   
        url('webfont.woff2') format('woff2'), 
        url('webfont.woff') format('woff'), /* chrome、firefox */
        url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android*/ 
        url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */ 
 }

标签使用字体图标类名
- iconfont：字体图标基本样式（字体名，字体大小等等）
- icon-xxx：图标对应的类名
```
  <span class="iconfont icon-xxx"></span>
```

⚠注意：一般用i标签取代span标签。

3.3 上传矢量图

作用：项目特有的图标上传到 iconfont 图标库，生成字体。上传矢量图上传步骤：上传 → 上传图标 → 选择 svg 矢量图，打开 → 提交 → 系统审核

4 浏览器处理文字内容元素的原理

浏览器解析文字时，默认将文字进行基线对齐的。而浏览器在处理行内元素以及行内块元素时，会默认视按照文字去解析，如果一排大小不一致的文字或者大小不一致的文字与图像，两者底部明显会出现差距，可以借助vertical属性设置垂直对齐方式或借助display属性将其变成块级元素，来解决。

5 元素间的空白问题

元素间的空白问题

6 行内块之间的幽灵空白问题

行内块幽灵空白问题现象行内块的幽灵空白问题

7 鼠标声明块

鼠标相关属性

8 过渡声明块

过渡可以在不使用 Flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一种样式。

8.1. 过渡属性

属性：transition-property
作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡效果。
常用值：
1. none ：不过渡任何属性。
2. all ：过渡所有能过渡的属性。（两个状态属性值不同的所有属性，都产生过渡效果）
3. 具体某个属性名 ，例如： width 、 heigth ，若有多个以逗号分隔。

⚠注意：

不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。

常见的支持过渡的属性有：颜色、长度值、百分比、 z-index 、 opacity 、 2D 变换属性、 3D 变换属性、阴影。

8.2 过渡持续时间

属性：transition-duration
作用：设置过渡的持续时间，即：一个状态过渡到另外一个状态耗时多久。
常用值：
1. 0 ：没有任何过渡时间 —— 默认值。
2. s 或 ms ：秒或毫秒。
3. 列表 ：
  - 如果想让所有属性都持续一个时间，那就写一个值。
  - 如果想让每个属性持续不同的时间那就写一个时间的列表。

8.3. 过渡开始延迟时间

属性：transition-delay
作用：指定开始过渡的延迟时间，单位： s 或 ms

8.4 过渡出场方式

属性：transition-timg-function
常用值：

ease ：平滑过渡 —— 默认值
linear ：线性过渡
ease-in ：慢 → 快
ease-out ：快 → 慢
ease-in-out ：慢 → 快 → 慢
step-start ：等同于 steps(1, start) (直接抵达终点，不经历过渡时间)
step-end ：等同于 steps(1, end)(待过渡时间完了，再抵达终点)
steps( integer,?) ：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间点。第二个参数默认值为 end 。实际上等价于 steps(移动步数,抢跑或者缓跑)
cubic-bezie ( number, number, number, number)：特定的贝塞尔曲线类型。在线制作贝赛尔曲线： cubic-bezier.com

8.5 过渡复合属性

若设置了一个时间，表示 duration ；若设置了两个时间，第一个是 duration ，第二个是 delay ；其他值没有顺序要求。具体模板，如下代码所示：

transition:1s 1s linear all; all为默认值可以省略。

⚠注意： transition 设置给元素本身

9 透明度声明块

作用：设置整个元素的不透明度（包括元素里的内容）（包含背景和内容）
属性名：opacity
属性值：0 – 1
- 0：完全透明（元素不可见）
- 1：不透明
- 0-1之间小数：半透明
opacity 与 rgba 的区别？
- opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
- rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

10 综合案例-轮播图

10.1 视觉效果

10.2 准备素材

图片名称为banner1.jpg、banner2.jpg与banner3.jpg的图片放置于当前项目根目录下。轮播图素材

10.3 使用技术

定位
字体图标
Flex布局

10.4 制作思路

第1步创建.banner盒子，在盒子中创建对应的图片区域、箭头区域以及圆点区域。
第2步给.banner盒子设置好宽高、水平居中以及背景色。
第3步给图片区域设置无序列表ul，设置多个li包裹图片。（图片区域不止一张图片）
第4步让图片适应.banner盒子宽度。（可以给图片设置一定的圆角，来进行美化。）
第5步给图片设置vertical:middle;让图片间的空隙消失掉。
第6步给包裹图片的无序列表ul设置display:flex;让图片横着排列。
第7步给.banner盒子设置overflow:hidden；声明块隐藏其余图片。
第8步在箭头区域用a标签创建左箭头.prev以及右箭头.next。
第9步设置箭头宽高、背景色，再将箭头定位至相关位置，设置好箭头的圆角边框。
第10步在左右箭头中用字体图标设置箭头图标，去掉下划线，并设置好箭头图标的居中位置以及颜色。
第11步使用选择器:hover实现箭头图标的滑动显示。
第12步用有序列表ol，设置多个li实现多个圆点，采用箭头定位的方式进行定位即可。

10.5 编码实现-图片效果

HTML标签结构

<div class="banner">
    <!-- 图: ul > li -->
    <ul>
      <li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li>
    </ul>
</div>

CSS外观样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.banner {
  position: relative;
  margin: 100px auto;
  width: 564px;
  height: 315px;
  /* background-color: pink; */
  overflow: hidden;
}

/* 图片 */
.banner img {
  width: 564px;
  border-radius: 12px;
  vertical-align: middle;
}

.banner ul {
  display: flex;
}

10.6 编码实现-箭头效果

HTML标签结构

<!-- 箭头 -->
<!-- 上一张 prev -->
<a href="#" class="prev">
  <i class="iconfont icon-zuoce"></i>
</a>
<!-- 下一张 next -->
<a href="#" class="next">
  <i class="iconfont icon-youce"></i>
</a>

CSS外观样式

  /* 箭头 */
.banner .prev,
.banner .next {
  /* 隐藏 */
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 20px;
  height: 30px;
  background-color: rgba(0,0,0, 0.3);

  text-decoration: none;
  color: #fff;
  line-height: 30px;
}

/* 鼠标滑到banner区域，箭头要显示 display:block */
.banner:hover .prev,
.banner:hover .next {
  display: block;
}

.banner .prev {
  left: 0;
  border-radius: 0 15px 15px 0;
}

.banner .next {
  right: 0;
  border-radius: 15px 0 0 15px;
  text-align: center;
}

10.7 编码实现-圆点效果

HTML标签结构

<!-- 圆点 -->
<ol>
  <li></li>
  <li class="active"></li>
  <li></li>
</ol>

CSS外观样式

/* 圆点 */
.banner ol {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  height: 13px;
  background-color: rgba(255,255,255,0.3);

  display: flex;

  border-radius: 10px;
}

.banner ol li {
  margin: 3px;
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

/* 橙色的li */
.banner ol .active {
  background-color: #ff5000;
}

第15章 掌握CSS——高级技巧