css(8)

学习目标

能够理解什么是精灵图及优点（将很多小图片放到一张图片上，减少对服务器请求次数，减轻服务器压力）

能够使用精灵图设置背景图片

能够使用字体图标

能够完成滑动门案例

能够写出常用的样式初始化

能够了解BFC以及触发BFC的几种方式

。。。。。。

双伪元素清除浮动

伪元素清除浮动升级版（既解决了清除浮动、又解决了塌陷 ）

两个伪元素清除法的合并方法如下：

ヾ(๑╹◡╹)ﾉ"双伪元素清除法

清除浮动：

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

margin的塌陷问题：

.clearfix::before {
    content: '';
    /*触发BFC + 并且转换成块级元素*/
    display: table;
}

合并起来：

/* ::before 定义成一个块级的表格， 触发 BFC 可以防塌陷 */
.clearfix::before，
.clearfix::after {
    content: "";
    /* BFC + 转化为块级元素 */
    display: table;
}

/* ::after 用于清除浮动 */
.clearfix::after {
    clear: both;
}
/* 兼容 IE 67 */
.clearfix {
    *zoom: 1;
}

检查大网页的样式（小米、淘宝、JD），一般用双伪元素

ヾ(๑╹◡╹)ﾉ"检查网页

<!--  塌陷和清除浮动问题并存  -->
<!-- 双伪元素清除浮动 -->

<div class="father clearfix">
	<div class="son"></div>
</div>

/* 切换测试 */
/* 浮动 */
float: left;
/* 塌陷 */
margin-top: 50px;

精灵图（会使用）

将一些小图片放在一张大图片上（css sprite），比如淘宝或者京东

ヾ(๑╹◡╹)ﾉ"画图了解下前端与后端交互

好处（了解）：

将很多的小图片放在一张大图片，最终只要请求一次就行了，可以减少对服务器的请求次数，减轻服务器的压力

精灵图的使用（必会）

一张大的图片上，有很多小的图片，那么如何将这个小的图片拿出来呢 ?

步骤：

1. 创建一个盒子
2. 通过PS量取小图片的尺寸，将对应小图片的宽高直接设置给盒子
3. 将精灵图设置为盒子的背景图片
4. 将小图片的坐标取负值添加给background-position：x y;
   • 让背景图片往上移动，y轴坐标是负数
   • 让背景图片往左移动，x轴坐标是负数

注意：

• 精灵图通过背景定位， 让所有的小图片都能显示
• 盒子和小图片大小一致
• 在ps中，通过切片，量取对应的坐标，直接取赋值（负数）即可

ヾ(๑╹◡╹)ﾉ"拼出自己的名字

字体图标（会使用）

一些显示效果为图标的文字

场景： 页面中有很多的图标（左右箭头、购物车、用户、等等），怎么完成页面的效果？？

图片缺点：

1. 增加了很多额外的 “http请求” ，大大降低网页的性能
2. 图片不能很好的进行 “缩放” ，因为图片放大和缩小会失真（马赛克）

很多情况下我们希望http请求尽量减少（网页速度）、图标是可以缩放的（矢量）

字体图标（iconfont）就可以解决这些问题！！

**优点：**本质是文字，可以任意改变颜色，大小，不失真

阿里iconfont字库

http://www.iconfont.cn/ 阿里的一个字体图标字库

使用步骤（会使用）

1. 登录阿里 iconfont 字库，将自己想要的图标加入购物车

2. 点击购物车图标，下载代码

3. 在项目目录新建 fonts 文件夹，将字体图标文件包内所有文件拷贝进 fonts 文件夹

4. 在项目中引入字体css文件（字体文件包中的 demo_fontclass.html 为说明书 )

   <link rel="stylesheet" href="fonts/iconfont.css">
   href：写的是iconfont.css文件的路径
   

5. 用类名使用（字体文件包中的 demo_fontclass.html 为说明书）

   <i class="iconfont icon-refresh"></i>
   

注意：

• 设置字体图标样式时，注意层叠性问题！！（通过iconfont类名找到i标签）
• 不能改变字体图标的font-family

滑动门

利用已学技术，根据文本内容，让背景自适应。可以实现一些特殊的效果（QQ聊天气泡）

**画图演示：**QQ聊天气泡

滑动门步骤：

1. 左边：背景定位靠左
2. 中间：x轴方向平铺
3. 右边：背景定位靠右

拓展

行内元素与浮动的特殊现象（了解）

浮动：不能覆盖文字、图片和行内块（行内元素一般只包含文字，所以浮动元素一般也不能覆盖行内元素：图文环绕），会把这些元素挤到一边去，但是层级仍然按照高半个级别记忆即可（不矛盾）。

说白了，浮动元素一般只能覆盖块级元素（特殊现象，知道即可）

ヾ(๑╹◡╹)ﾉ"行内元素与浮动的特殊情况

1.浮动的元素可以覆盖标准流中的块级元素
2.浮动的元素不能覆盖行内块元素
3.浮动元素不能覆盖图片
4.浮动元素不能覆盖行内元素
5.图文环绕-》浮动的元素不能覆盖文字

BFC块级格式化上下文（了解）

Block Formatting Context：指一个独立的块级渲染区域，页面上的一个隔离的独立容器

说白了，父盒子里面的子元素无论怎么翻江倒海，都不会影响父盒子原来的布局

对于基础班的我们，对此稍加了解，只需要知道BFC的两个作用即可。

BFC的作用：

1. 触发了 BFC 的盒子，就成为了页面上的一个隔离的独立容器， 父盒子就还是原来的布局，不会因为子元素影响父盒子的布局

   塌陷问题 :  子盒子设置margin-top影响到父盒子的塌陷（触发BFC后为了不影响父盒子的布局，所以消除了塌陷的影响）
   浮动问题 :  子盒子设置浮动，，影响到了父盒子的高度（触发BFC后为了不影响父盒子的布局，所以清除浮动）
   

   **应用：**解决塌陷问题，清除浮动

   ヾ(๑╹◡╹)ﾉ"解决塌陷问题和浮动问题

2. 触发了BFC的普通盒子，不会与浮动元素重叠

   **应用：**圣杯布局（就业班移动端布局会用到）

   ヾ(๑╹◡╹)ﾉ"margin方法和BFC方法圣杯布局

如何触发 BFC (测试塌陷) (了解)

给父盒子设置：

• float的值不为none
• overflow的值不为visible。
• display的值为table，table-cell，inline-block
• position的值不为relative和static
• 等等…

小米练习

1. 顶部

   • 边框的方法与很多 可以是| 、span、border、伪元素（伪元素可以提取出一个公共的类）、

2. 导航部分

   • 导航部分的高度，可以是里面小图片的高度（上面的logo的高度 下面的是手环的底部），设置上面和下面的margin，
   • 高度也可以设置成整体的高度，然后让里面的文字和图片垂直居中