【学习笔记】前端学习笔记（九）

前言

本笔记是b站黑马程序员前端入门教程的听课笔记，主观性较强，初衷是与大家共同交流，一起进步。

精灵图

为什么需要精灵图

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度
核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

精灵图的使用

使用精灵图核心：

1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
3. 移动背景图片位置， 此时可以使用 background-position 。
4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
5. 因为一般情况下都是往上往左移动，所以数值是负值。
6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
   使用精灵图核心总结：
7. 精灵图主要针对于小的背景图片使用。
8. 主要借助于背景位置来实现—background-position 。
9. 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理）

.box1{
	width:60px;
	height:60px;
	margin:100px auto;
	background: url(images/sprites.png) no-repeat -182px 0;
}

字体图标

字体图标的产生

字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
• 兼容性：几乎支持所有的浏览器，请放心使用
  注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
  总结：

1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2. 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

字体图标的下载

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

字体图标的引入

在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中。

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

html 标签内添加小图标。
给标签定义字体。

span {
 font-family: "icomoon";
}

CSS三角

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

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

鼠标样式

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

li {cursor: pointer; }

轮廓线

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {outline: none; }

防止拖拽文本域

实际开发中，我们文本域右下角是不可以拖拽的

textarea{ resize: none;}

vertical-align 属性应用

用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

vertical-align : baseline | top | middle | bottom

溢出的文字省略号显示

单行文本溢出显示省略号

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

多行文本溢出显示省略号

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

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