给自己时间，不要焦急，一步一步来，一日一日过，
请相信生命的韧性是惊人的，跟自己向上的心去合作，不要放弃对自己的爱护。
元素的显示与隐藏
display显示
使用disply隐藏之后，不再保留原来的位置，会被之后正常的文档流覆盖
display: none 隐藏对象display：block 除了转换为块级元素之外，同时还有显示元素的意思。visibility可见性
和display隐藏不同的是，使用可见性隐藏，元素仍然会保留原来的位置
visibility：visible ; 对象可视visibility：hidden; 对象隐藏overflow溢出
这是一个神奇的单词哈????，很多地方都会用到它，之前提到的清除浮动也使用到了overflow
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
综合运用
核心代码github地址
HTML部分
CSS部分（很重要的思想转换，一定要记得）
CSS用户界面样式
鼠标样式cursor
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
轮廓线
平时我们最直接的写法是 ：outline: none，取消轮廓线。
<input type="text" style="outline: none;"/>防止文本域拖拽
平时使用文本域布局的时候，如果不设置任何属性，用户抗议自己修改文本域的大小，会影响页面的整体布局，这时我们就要注意了：
实际开发中，我们文本域右下角是不可以拖拽的 ❗
<textarea style="resize: none;"></textarea>vertical-align 垂直对齐
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素
特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
vertical-align : baseline |top |middle |bottom对齐方式依次是：基线、顶线、中线、底线
溢出的文字省略号显示
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
text-overflow : clip ；不显示省略标记（...），而是简单的裁切 text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
white-space:normal ；默认处理方式white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。省略号三部曲
/*1. 先强制一行内显示文本*/ white-space: nowrap; /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;CSS精灵技术（sprite） 很重要
为什么需要sprites技术
????图为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展示给用户，但是一个网页中往往会应用很多小的背景图作为修饰，当网页中的图像过多，服务器就会频繁的接收和发送请求，会降低页面的加载速度特点：有效的减少服务器接收和发送请求的次数，提高页面的加载速度
精灵技术讲解
CSS精灵图实际上是将网页中的一些背景图整合到一张大图中，这样当用户访问该页面时，只需要向服务器发送一次请求，网页中的背景图像即可全部展示出来
需要使用到的CSS技术：background-image、background-repeat、background-position属性进行背景定位。
精灵技术使用的核心总结
- 精确测量，每个小背景图片的大小和位置。
- 给盒子指定小背景图片时， 背景定位基本都是负值。