学习前端的第九天2020-10-22

经过这段时间的学习，HTML和CSS的大部分我们已经学完了，今天老师给我们讲了些零碎的东西。知识点比较散。
1. 精灵图
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称CSS Sprites、CSS 雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。
精灵图（sprites）的使用
使用精灵图核心：
1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
3. 移动背景图片位置， 此时可以使用 background-position 。
4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
5. 因为一般情况下都是往上往左移动，所以数值是负值。
6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
使用精灵图核心总结：
1.精灵图主要针对于小的背景图片使用。
2.主要借助于背景位置来实现—background-position 。
3.一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）
精灵图是有诸多优点的，但是缺点很明显:
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
2.字体图标
字体图标 iconfont.可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。字体图标的优点：
①轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
②灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等；
③兼容性：几乎支持所有的浏览器，请放心使用
注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结：
1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
3. CSS 三角
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
做法如下：

div {
 width: 0;
 height: 0;
 line-height: 0;
 font-size: 0;
 border: 50px solid transparent;
 border-left-color: pink;
}

效果如下：

4.CSS 用户界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
①更改用户的鼠标样式
②表单轮廓
③防止表单域拖拽
鼠标样式： 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。语法为选择器 {cursor: pointer; }
属性：①default 小白箭头，默认②pointer 小手，提示用户可以点击③move 移动，提示用户可以拖拽④text 文本，提示用户可以输入内容⑤not-allowed 禁止，提示用户。
表单轮廓： 给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。语法为input {outline: none; }
防止拖拽文本域： 实际开发中，我们文本域右下角是不可以拖拽的。语法为textarea{ resize: none;}。
5.vertical-align 属性应用
CSS 的 vertical-align 属性经常用于设置图片或者表单(行内块元素）和文字垂直对齐。但是它只针对于行内元素或者行内块元素有效。语法：vertical-align : baseline | top | middle | bottom

解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1.给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
2.把图片转换为块级元素 display: block;
6. 溢出的文字省略号显示
单行文本溢出显示省略号必须满足三个条件，如下列代码：

/*1. 先强制一行内显示文本*/
 white-space: nowrap; （ 默认 normal 自动换行）
 /*2. 超出的部分隐藏*/
 overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
 text-overflow: ellipsis;

多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核）

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

今天的内容大概就这么多，溜了溜了~