知识导航：
- 盒子的显示与隐藏
- 用户界面样式
- 鼠标样式
- input轮廓线
- 文本域脱拽问题
- 设置垂直对齐
- 使溢出text文本以省略号显示
- css精灵
1. 盒子的显示与隐藏
应用：使一个盒子显示或者隐藏。如：
开始鼠标未经过我的淘宝
当鼠标经过我的淘宝
即，鼠标经过时盒子显示。鼠标移出时，盒子隐藏
1.1 display显示
基本语法：
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
下面来看display的特性；准备三个盒子
给第二个盒子添加display:none效果：
即display属性隐藏元素之后，不再保留位置了
1.2 visibility 可见性 (了解即可)
基本语法：
visibility：visible ; 对象可视
visibility：hidden; 对象隐藏
还是用上面的三个盒子
这回给第二个盒子添加visibility：hidden;，效果：
即visibility隐藏元素之后，仍然占有位置
1.3 overflow 溢出(重点)
设置当对象的内容超过其指定高度及宽度时如何管理内容。
它的属性值如下：
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
2. 用户界面样式
2.1 鼠标样式
设置鼠标在盒子上的形状，如盒子是input的输入框。则最好显示鼠标的那种文本格式，是链接盒子则鼠标样式为小手样式
属性：cursor
其属性值：
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
代码举例
<style>
input {
cursor: text;
}
</style>
<input type="text">
2.2 轮廓线 outline
鼠标定到这个input时，它自己出来的蓝色边框。影响我们页面的美观
去掉的语法：
设置属性
outline: 0;
或者
outline: none;
2.3 防止拖拽文本域
行内属性为area的input文本域是可以拖拽的。
这种拖拽肯定是及其影响布局（倘或我把它拖的屏幕这么大我其他盒子岂不是都被挤跑了）
设为不可拖拽语法：
<textarea style="resize: none;"></textarea>
3. vertical-align 垂直对齐
我们知道了有宽度的块级元素居中对齐，是margin: 0 auto；让文字居中对齐，是 text-align: center。但是还没有总结过垂直居中
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，它对块级元素无效
它的基本语法：
vertical-align : baseline |top |middle |bottom
四个属性的对齐分别对应下图这四根线
即：它是设置一个行内元素是与另一个行内（或行内块）元素的哪跟线对齐
举例：
如果给一行内元素一个vertical-align : baseline，则它便会跟与其相邻的行内元素的基线对齐
3.1 它有一个重要应用（清除3像素bug）：
当我们往一个空的块盒子扔一张图片。这个不用设宽高，让图片把它撑开。会发现下面的效果。
它的下方有一个3px的缝隙。
原理其实上面就有所涉及，img属于行内块元素。即它算是文本的一种，可认为所留下的位置是文字的基线到底线的那个距离
如下图，你假设它旁边有文字。它默认是会留位置的
解决方法很简单
- 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。但是最好还是用top
- 又或者直接把img转为块元素更为简单方便，块级元素是不存在这种问题的。不需考虑对齐方式
4. 溢出的文字省略号显示
基本步骤：
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
语法：
white-space:normal ；默认处理方式
white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
text-overflow 文字溢出
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
语法：
text-overflow : clip ；不显示省略标记（...），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
举例开始：
添加属性：
效果图：
5 css精灵（重要重要）
为什么需要：
当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。精灵技术产生了
它的原理是将上面的所有小图集中放在一张大图上。一次性拿过来。
像这种
嗯，速度是快了但对我们布局却增加了点难度（哈哈）
这里我们需要使用CSS的
- background-image、
- background-repeat
- background-position属性进行背景定位，
其中最关键的是使用background-position 属性精确地定位。
下面写一个精灵当做例子吧
找一个精灵图如下图
要求，把那个下载游戏挖出来。
首先把精灵图扔到fw里面，通切片工具选中下载游戏
它的大小和在精灵图上的坐标已有显示。
打开vscode准备一个此大小的盒子
接下来添加背景属性，小图的坐标已知。
设置为
效果图：
over！！！
还是再唠叨一下吧
新手在坐标设置这里可能不太理解。
我来解释一下。开始将背景图装入盒子时是这样的。
（position属性不明白的话可以看看我的css总结2背景属性那）
接着上。可发现x轴是不需要动，刚才fw中已经知道选中区域的纵坐标为218px，即只需向y的负反方向走218px即可！
finish！！！
