前端学习第八周(3)

1.精灵图
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
1.1精灵图的使用（sprites）
（1.主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
（2.移动背景图片位置，此时可以使用background-position。
（3.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。
（4.因为一般情况下都是往上往左移动，所以数值是负值。
（5.精确测量，每个小背景图片的大小和位置。
2.字体图标icon font
2.1字体图标的产生
使用场景：主要用于显示网页中通用、常用的一些小图标。
为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
2.2字体图标的优点
（1）轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
（2）灵活性：本质是文字，可以很随意的更改颜色、产生阴影、透明效果、旋转等。
（3）兼容性：几乎支持所有的浏览器，请放心使用。
注意：字体图标不能代替精灵技术，只是对工作中图标部分记住的提升和优化。
总结：1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2.如果遇到一些结构和样式比较复杂的小图标，用精灵图。
2.3字体图标的下载
下载网站：icomoon字库 http://icomoon.io
http://www.iconfont.cn/
2.4字体图标的引入
把下载包里面的fonts文件夹放入页面根目录下。
2.5字体图标的追加
把压缩包里面的selection.json重新上传，然后选中自己想要的图标，重新下载压缩包，并替换原来的文件即可。
3.css三角
 .box2 {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: pink;
            margin: 100px auto;
        }
4.1css用户界面样式
4.1什么是用户界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验
（1）更改用户的鼠标样式
（2）表单轮廓
（3）防止表单域拖拽
4.1.1鼠标样式cursor
语法：li{cursor:pointer;}
属性值：

4.1.2轮廓线 outlined
给表单添加outline：0；或者outline：none;后，就可以去掉默认的蓝色边框。
语法：input{outline：none;}
4.1.3防止表单域拖拽resize
语法：textarea{resize:none;}
5.vertical-align属性应用
使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：vertical-align：baseline|top|middle|bottom
5.1图片、表单文字对齐
图片、表单都属于行内块元素，默认的是基线对齐。
5.2解决图片底部默认空白缝隙问题
bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
解决方案：1.给图片添加vertical-align：top|middle|bottom等。（推荐使用）
2.把图片转换为块级元素display：block；
6.溢出的文字省略号显示
1.单行文本溢出显示省略号--必须满足三个条件 

2.多行文本溢出显示省略号