CSS基础（五）

1. 精灵图

1.1 为什么需要精灵技术

为什么需要使用精灵图？

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

什么是精灵图？

精灵图又称雪碧图，CSS Sprites；
将网页中需要使用的多张小图片整合到一张大图中，这样只要向浏览器发送更少次数的请求即可获得更多的图片。 精灵图示例如下：

1.2 精灵图使用（原理）

精灵图的应用场景是什么？

精灵图主要针对背景图片使用。

使用精灵图的核心是什么？

使用精灵图的核心是设置背景图片 的 backgroud-position（负值）。

网页中的坐标方向 `x` 轴是从左到右，`y` 轴是从上到下吗？

x 轴是从左到右变大，从右向左移动会减少（负值）
y 轴是从上到下变大，从下向上移动会减少（负值）

往左往上移动图片是正值还是负值？

负值

1.3 精灵图使用（代码）

基于设计稿明确盒子大小（宽 * 高）；
布局时给盒子指定：width、height 和 background 属性：
使用像素大厨等工具测量图片偏移坐标；
设置 background-position 属性显示正确的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>精灵图使用</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;   
            margin: 100px auto;
            background: rgb(163, 132, 132)   
        }
        .box2 {
            width: 56px;
            height: 56px;
            margin: 20px;
            background: url(images/sprites.png) no-repeat -184px 0px;
        }
        .box3 {
            width: 23px;
            height: 22px;
            margin: 20px;
            background: url(images/sprites.png) no-repeat -157px -108px;
        }
        .box4 {
            width: 233px;
            height: 127px;
            margin: 20px auto;
            background: url(images/sprites.png) no-repeat 0px -220px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>
</html>

1.4 精灵图案例-拼出自己名字

图片素材：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>精灵图使用</title>
    <style>
        .g {
            display: inline-block;
            width: 108px;
            height: 108px;
            margin-right: 7px;
        }
        .box2 {
            background: url(images/abcd.jpg) no-repeat -480px -560px;
        }
        .box3 {
            background: url(images/abcd.jpg) no-repeat -220px -140px;
        }
        .box4 {
            background: url(images/abcd.jpg) no-repeat 0px 0px;
        }
        .box5 {
            background: url(images/abcd.jpg) no-repeat -255px -275px;
        }
        .box6 {
            background: url(images/abcd.jpg) no-repeat -100px -140px;
        }
    </style>
</head>
<body>
        <div class="box2 g"></div>
        <div class="box3 g"></div>
        <div class="box4 g"></div>
        <div class="box5 g"></div>
        <div class="box6 g"></div>
</body>
</html>

效果图：

2. 字体图标

2.1 字体图标产生和优点

字体图标的应用场景是什么？

主要用于显示网页中通用、常用的一些小图标。

精灵图有什么缺点？

本质还是图片，文件体积较大；
图片在高清屏幕上放大和缩小会失真（在手机上尤为明显）；
图片制作完毕要更换比较复杂。

字体图标的本质是什么？能够给字体图标更改大小或者修改颜色吗？

字体图标是为前端工程师提供一种方便高效的图标使用方式；
展示的是图标，本质属于字体；
因为字体图标的本质是字体，所以我们可以给字体图标更改大小或颜色。

字体图标有什么优点？

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

字体图标能完全取代精灵图吗？在开发中如何选择？

字体图标不能替代精灵图技术，只是对工作中图标部分技术的提升和优化。
在开发中的选择：
- 字体图标：结构和样式比较简单的小图标（网站风格统一的素材）；
- 精灵图：结构和样式复杂一点的小图片（网站风格统一的素材）；
- 图片：非网站设计的，个性化的，例如：高清广告大图、用户上传的产品图片、用户头像等仍然使用独立的图片处理。

2.2 字体图标下载

网址：

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

点击左上角的IcoMoon App
进入之后点击Import Icons把SVG图片上传上去
全选上传上去的图片，点击右下角的Generate Font
每个项目下都会有一个Get Code按钮，点击它会出现一个使用方法的弹窗
点击左上角的Preferences，在Font Name中设置生成字体的名称
设置好之后，关闭弹出窗口，点击右下角的Download按钮进行下载

2.3 字体图标的使用

将下载包里的 fonts 文件夹放入页面根目录下；

TureType(.ttf) 格式：是 Windows 和 Mac 的最常见的字体，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
Web Open Font Format(.woff)格式：支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
Embedded Open Type(.eot)格式：是 IE 专用字体，支持这种字体的浏览器有 IE4+；
.SVG(.svg)格式：是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有 Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+。在 CSS 样式中全局声明字体

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

在 CSS 中定义字体图标的类

.iconfont {
  font-family: 'icomoon';
  font-size: 100px;
}

从下载的 demo.html 页面中复制小框框粘贴到页面中的 span 标签内

    <span class="iconfont"></span>

<!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>3. 字体图标的使用</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?p4ssmb');
            src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        .iconfont {
            font-family: 'icomoon';
            font-size: 50px;
            color: aqua;
        }
    </style>
</head>

<body>
    <span class="iconfont"></span>
    <span class="iconfont"></span>
    <span class="iconfont"></span>
    <span class="iconfont"></span>
    <span class="iconfont"></span>
</body>

</html>

效果图：

阿里图标使用方法

获取在线链接
html中引用

 <link rel="stylesheet" type="text/css"href="//at.alicdn.com/t/font_1945166_mbivgxzc7qo.css"/>

标签中引用

<span class=" iconfont icon-component"></span>

<!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>3. 字体图标的使用</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2824245_99wkuk6vrbg.css">
    <style>
        .iconfont {
            font-size: 50px;
            color: aqua;
        }
    </style>
</head>

<body>
    <span class="iconfont icon-bingtutubiao"></span>
    <span class="iconfont icon-cangchucangku"></span>
    <span class="iconfont icon-bingtutubiao"></span>
    <span class="iconfont icon-bingtutubiao"></span>
</body>

</html>

2.4 字体图标的追加和加载原理

什么时候需要追加字体图标？

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

追加字体图标的关键文件是哪一个？

selection.json

追加字体图标的步骤是什么？

上传 selection.json - 让服务器知道我们之前使用的图标；
挑选新的图标；
下载替换原有的 fonts 目录 - 以前的代码不用做任何修改。

字体图标加载的原理？

3. CSS 三角

3.1 CSS 三角的做法

CSS 能做三角形吗？

用 CSS 做三角形有什么优缺点？

优点

不需要使用图片，可以节省网络资源；
可以给页面中长方形选框增加点缀性的指示器，用户体验更好；缺点
对程序员的要求高。

CSS 做三角形的核心原理是什么？

CSS 中边框连接处是斜边连接的。

CSS 做三角形的步骤是什么？

指定盒子的宽、高为 0 —— 让四条边都靠在一起；
用 border 属性绘制透明边框
```
border: 100px solid transparent;
```
需要哪个方向的三角形，就给哪个方向指定颜色（顺序：上右下左）
```
border-color: red green blue orange;
```
设置行高和字体，以保证兼容性
```
line-height: 0;
font-size: 0;
```

3.2 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>6. 三角应用</title>
    <style>
        .box {
            position: relative;
            width: 120px;
            height: 120px;
            background-color: chartreuse;
        }
        .box span {
            position: absolute;
            top: 100px;
            right: -20px;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <span></span>
    </div>
</body>
</html>

4. 用户界面样式

4.1 用户界面-鼠标样式

哪一个属性可以设置鼠标样式？

cursor 可以设置鼠标样式。

几种鼠标样式？分别表示什么含义？

pointer：手型
crosshair：十字型
text：平时鼠标移动到文本上的样式
wait：等待的效果
default：默认的那种效果
help：带问号的鼠标样式
e-resize：向右的箭头
ne-resize：向右上方的箭头
n-resize：向上的箭头
nw-resize：向左上方的箭头
w-resize：向左的箭关
sw-resize：向左下的箭头
s-resize：向下的箭头
se-resize：向右下方的箭头
auto：系统自动的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>7. 用户界面样式-鼠标样式</title>
</head>
<body>
    <ul>
        <li style="cursor: pointer;">手型</li>
        <li style="cursor: crosshair;">十字型</li>
        <li style="cursor: move;">：平时鼠标移动到文本上的样式</li>
        <li style="cursor: wait;">等待的效果</li>
        <li style="cursor: help;">带问号的鼠标样式</li>
        <li style="cursor: e-resize;">向右的箭头</li>
        <li style="cursor: ne-resize;">向右上方的箭头</li>
        <li style="cursor: ne-resize;">向上的箭头</li>
        <li style="cursor: n-resize;">向左上方的箭头</li>
        <li style="cursor: w-resize;">向左的箭关</li>
        <li style="cursor: sw-resize;">向左下的箭头</li>
        <li style="cursor: s-resize;">向下的箭头</li>
        <li style="cursor: se-resize;">向右下方的箭头</li>
        <li style="cursor: auto;">系统自动的效果</li>
    </ul>
</body>
</html>

4.2 用户界面-取消表单轮廓和防止拖拽文本域

用哪一个属性可以取消表单输入框的轮廓？

outline: none;

用哪一个属性可以禁止 `textarea` 被拖拽，这样设置有什么好处？

resize: none;
可以防止用户拖拽文本域破坏界面布局。

在使用 `textarea` 时为什么不建议把双标签换行写？

textarea 中会完全还原 HTML 中的空格。

<!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>8.取消表单轮廓和防止拖拽文本域</title>
    <style>
        textarea {
            outline: none;
            resize: none;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

4.3 vertical-align 实现行内块和文字垂直居中对齐

`vertical-align` 属性有哪些应用场景？

用于设置图片或者表单(行内块元素）和文字垂直对齐。

`vertical-align` 的语法是什么？

vertical-align: baseline | top | middle | bottom;

值	描述
baseline	默认，按照基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

行内块元素默认的 `vertical-align` 对齐方式是什么？

默认按照基线对齐；
会让图片底侧有一个空白缝隙。

<!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>9. vertical-align 实现行内块和文字垂直居中对齐</title>
    <style>
        .box img {
            /* vertical-align: baseline;默认，按照基线对齐 */
            /* vertical-align: top; 顶部对齐*/
            /* vertical-align: middle;中部对齐 */
            /* vertical-align: bottom;底部对齐 */
        }
        textarea {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/img.png" alt="">9. vertical-align 实现行内块和文字垂直居中对齐
    </div>
    <textarea name="" id="" cols="30" rows="10" placeholder="文本框"></textarea> 请您留言
</body>
</html>

4.4 图片底侧空白缝隙解决方案

是什么原因导致图片底边有一个空白缝隙？

行内块元素和文本默认按照基线对齐。

如何解决图片底边的缝隙？

添加 vertical-align：middle | top | bottom（推荐使用）；
把图片转换为块级元素 display: block;。

单行文字溢出显示省略号有什么应用场景？

文字过长超出了显示区域，如果全部显示会破坏布局，如果直接切断又会影响用户体验，此时在文字末尾用省略号替代超出的部分是一个很好的选择。

要实现单行文字溢出显示省略号有哪三个条件？

   /* 1. 强制在一行显示文本，默认 normal 会自动换行 */
   white-space: nowrap;

   /*2 . 超出的部分隐藏 */
   overflow: hidden;

   /* 3. 文字用省略号替代超出的部分 */
   text-overflow: ellipsis;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>10. 图片底侧空白缝隙解决方案</title>
    <style>
        div {
            border: 2px solid red;
        }
        img {
            /* vertical-align: middle; */
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <img src="images/ldh.jpg" alt="">
    </div> 
</body>
</html>

4.5 单行文字溢出省略号显示

<!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>11. 单行文字溢出省略号显示</title>
    <style>
        p {
            width: 100px;
            height: 50px;
            border: 1px dashed red;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <p>11. 单行文字溢出省略号显示</p>
</body>
</html>

4.6 多行文字溢出省略号显示

在实际的开发中，多行文字溢出省略号显示使用的多吗？为什么？

不多，因为存在较大兼容性问题，仅适用于 WebKit 浏览器或移动端（移动端大部分是 WebKit 内核）

多行文字溢出省略号显示推荐由前端解决还是后端解决？

推荐由后端解决，也可以在产品设计原型时提前沟通。

    /*1. 超出的部分隐藏 */
    overflow: hidden;

    /*2. 文字用省略号替代超出的部分 */
    text-overflow: ellipsis;

    /* 3. 弹性伸缩盒子模型显示 */
    display: -webkit-box;

    /* 4. 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 2;

    /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;

5. 布局技巧

5.1 布局技巧-margin 负值巧妙运用（上）

margin 负值能解决什么问题？

浮动盒子之间的边框合并

要实现细线边框的合并，关键要点是什么？

每个盒子的 margin 往左侧移动 -1px 正好压住相邻盒子边框。

<!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>13. 布局技巧-margin 负值巧妙运用（上)</title>
    <style>
        ul li {
            float: left;
            width: 100px;
            height: 200px;
            list-style: none;
            border: 2px dashed red;
            margin-left: -1px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

效果图

5.2 布局技巧-margin 负值巧妙运用（下）

上一小节完成的代码中存在什么隐患？

如果鼠标经过 li 标签要显示边框，由于之前的方案中，右侧盒子是压住左侧盒子的，所以除了最右侧的盒子之外，其他的边框都显示的不完整。

解决方案是什么

鼠标经过时给 li 标签增加相对定位，因为设置了定位属性的盒子会压住别的盒子。

   ul li:hover {
       position: relative;
       border: 1px solid blue;
        }

如果父盒子已经有定位属性，此时再给 li 标签增加相对定位，每个盒子还会保持之前的层次关系，依旧显示不完整。 2. 此时可以使用 z-index 属性，修改盒子的显示层级，代码如下：

ul li:hover {
  z-index: 1;
  border: 1px solid blue;
}

注意：z-index 的数值不需要单位，数值越大越靠前。

5.3 布局技巧-文字围绕浮动元素巧妙运用

文字围绕浮动元素效果应用了浮动的那个特性？可以应用于哪些场景？

利用了浮动元素不会压住文字的特性。
可以用在简单的图文新闻，如下图所示：

如果不使用文字环绕能够实现同样的效果吗？

可以注意：
文字环绕技巧知道就好，因为在布局时，最重要的是盒子的稳定。
负责布局的盒子就负责布局，负责内容的盒子就负责内容，单一职责是更好的选择。

5.4 布局技巧-行内块的巧妙运用

行内块元素的特性：

把 a 标签转换为行内块，可以指定宽高，并且在一排显示；
利用行内块元素中间有缝隙特性自动给标签间添加间距；
给父级添加 text-align: center;、line-height: 36px;、font-size: 14px; 子级会继承，优化代码。
清除边距（在布局时，如果涉及到文本、段落、链接、li 之类的内容，建议先清除边距）；
页面结构
大盒子属性
- 水平居中 margin: 50px auto; / 高度 38px；
- 文字水平居中 / 行高 38px / 字体大小 14px / 字体颜色 #333
a 标签属性
- 显示模式 inline-block / 宽高 36px * 36px
- 背景色 #f7f7f7 / 边框颜色 #ccc / 文字颜色 #333 / 不显示下划线
上一页（.prev） & 下一页（.next）宽度 85px
当前选中（.current）& 省略号（.elp）
- 背景色 #fff / 边框 none
输入框
- 宽高 45px * 36px
- 边框颜色 #ccc / 不显示表达轮廓
确认按钮
- 宽高 60px * 36px
- 背景色 #f7f7f7 / 边框颜色 #ccc / 粗体

<!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>15.布局技巧-行内块的巧妙运用</title>
    <style>
        .box {
            margin: 50px auto;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 14px;
            color: #333;
        }

        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            text-decoration: none;
        }

        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .clp {
            border: none;
            background-color: #fff;
        }

        .box input {
            width: 45px;
            height: 36px;
            border: 1px solid #ccc;
            outline:none;
            /* 表示使outline属性无效，使绘制于元素周围的一条线无效。 */
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#" class="clp">...</a>
        <a href="#" class="next">下一页&gt;&gt;</a>
        共10页 到第
        <input type="text" name="text" id="">
        <button>确定</button>
    </div>
</body>

</html>

效果图

5.5 布局技巧-CSS 三角巧妙运用（上）

绘制直角三角形的思路和实现

将下边框和左边框的宽度设置为 0；
让上边框比右边框的宽度大；
右边框设置颜色 / 上边框颜色透明；

    .box {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border-top: 100px solid transparent;
            border-left: 50px solid red;
    }

5.6 布局技巧-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>17. 京东直角三角形</title>
    <style>
        .price {
            margin: 50px auto;
            width: 160px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-size: 14px;
            border: 1px solid red;
        }

        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: #f00;
            color: #fff;
            font-weight: 700;
        }

        .origin {
            color: #666;
            font-size: 12px;
            text-decoration: line-through;
        }

        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;

            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border-top: 24px solid transparent;
            border-right: 12px solid #fff;
        }
    </style>
</head>

<body>
    <div class="price">
        <span class="miaosha">￥1650.00<i></i></span>
        <span class="origin">￥5088.00</span>
    </div>
</body>

</html>

效果图

5.7 CSS 初始化

CSS 初始化主要做了什么事情？能解决什么问题？

CSS 初始化主要是重设浏览器的样式。
因为不同浏览器对有些标签的默认属性值是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容，我们需要对 CSS 初始化。

每个网页都必须首先进行 CSS 初始化吗？

是的

京东初始化的代码你能看懂了吗？会保存下来吗？

可以保存
CSS 初始化不是标准，而是由很多前端工程师不断积累出来的，我们要像大厂学习，再没有更好的方案之前，直接拿来用。

* {
  margin: 0;
  padding: 0;
}
body {
  /* CSS3 抗锯齿形 让文字显示的更加清晰 */
  -webkit-font-smoothing: antialiased;
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, '\5B8B\4F53',
    sans-serif;
  color: #666;
  background-color: #fff;
}
em,
i {
  font-style: normal;
}
li {
  list-style: none;
}
a {
  color: #666;
  text-decoration: none;
}
a:hover {
  color: #c81623;
}
img {
  /* border 0 照顾低版本浏览器，如果图片外面包含了链接会有边框的问题 */
  border: 0;
  /* 取消图片底侧有空白缝隙的问题 */
  vertical-align: middle;
}
button {
  /* 鼠标经过 button 时，更改鼠标指针，提示用户可以点击 */
  cursor: pointer;
}
button,
input {
  /* "\5B8B\4F53" 是宋体，可以保证浏览器更高的兼容性 */
  font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, '\5B8B\4F53',
    sans-serif;
}
.hide,
.none {
  display: none;
}
/* 清除浮动 */
.clearfix:after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}
.clearfix {
  *zoom: 1;
}

CSS基础（精灵图,字体图标,CSS 三角,用户界面样式,布局技巧）