一、精灵图
1.为什么需要精灵技术
一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。
-
目的:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称 CSS Sprites. CSS 雪碧)。
-
核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了
2.精灵图使用(原理)
使用精灵图的核心:
1.精灵技术主要针对于背景图片的使用,就是把多个小背景图片整合到一张大图片中
2.这个大图片也称为 sprites 精灵图 或者 雪碧图
3.移动背景图片的位置,此时可以使用 background-position
4.移动的距离就是这个目标图片的x和y坐标,注意网页中的坐标有所不同(x轴右边走是正值,左边走是负值,y轴下边走是正值,上边走是负值)
5.一般情况下都是往上往左移动,所以数值是负值
6.使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。
3.精灵图使用(代码)
二、字体图标
1.字体图标产生和优点
字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的,但是缺点很明显。
- 图片文件还是比较大的。
- 图片本身放大和缩小会失真。
- 一旦图片制作完毕想要更换非常复杂。 此时,有一种技术的出现很好的解决了以上问题,就是字体图标 iconfont 字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
字体图标优点:
- 轻量级:一个图标字体比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少了服务器的请求
- 灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影,透明效果,旋转等
- 兼容性:几乎支持所有的浏览器
总结:
- 如果遇到一些结构和样式比较简单的小图标,就用字体图标。
- 如果遇到一些结构和样式复杂一点的小图片,就用精灵图。
2.字体图标下载
-
icomoon字库
外网,不需要登录即可下载 http://icomoon.io
- 点击 IcoMoon App
- 选择需要的图标
- 点击
Generate Font
- 点击 下载
-
阿里iconfont字库
免费,但是需要登录 iconfont-阿里巴巴矢量图标库
步骤:
- 字体图标的下载
- 字体图标的引入(引入到我们html页面中)
- 字体图标的追加(以后添加新的小图标)
3.字体图标的使用
- 选择字体并下载
- 将下载文件中的 fonts 文件夹复制到项目根目录下
- 字体声明,将
style.css
文件中的开头的字体声明代码赋值到 html 中 - 给
span
声明字体:span { font-family: "icomoon"; }
- 打开
demo.html
,复制页面中的方框图标到 html 代码中即可。
如何更新/添加字体图标?
上传 selections.json
,添加字体图标,重新生成。下载,更换 @font-face
内容。
4.字体图标的追加和加载原理
- 如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。
- 以 icomoon字库 网为例,点击网站内
import icons
- 把压缩包里面的 selection.json 重新上传,然后选中自己想要新的图标,重新下载压缩包,并替换原来的文件即可。
三、CSS 三角
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
}
四、CSS 用户界面样式
4.1 什么是界面样式
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
4.2 鼠标样式 cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
li {cursor: pointer; }
属性值 | 描述 |
---|---|
default | 小白,默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
4.3 轮廓线 outline
input {outline: none; }
4.4 防止拖拽文本域 resize
textarea{ resize: none;}
五、vertical-align 属性应用
vertical-align : baseline | top | middle | bottom
值 | 描述 |
---|---|
baseline | 默认,元素放置在父元素的基线上 |
top | 把元素的顶端与行中最高元素的顶端对齐(顶线对齐) |
middle | 把此元素放置在父元素的中部(中线对齐) |
bottom | 把元素的顶端与行中最低的元素的顶端对齐(底线对齐) |
5.1 图片、表单和文字对齐
图片、表单都属于行内块元素,默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle
就可以让文字和图片垂直居中对齐了。
5.2 解决图片底部默认空白缝隙问题--2种解决方案
![](https://i-blog.csdnimg.cn/blog_migrate/f10a3ae89c556c0fd7c924f6b32713b5.png)
六、溢出的文字省略号显示
1. 单行文本溢出显示省略号
2. 多行文本溢出显示省略号
1. 单行文本溢出显示省略号--必须满足三个条件
/*1. 先强制一行内显示文本*/
white-space: nowrap; ( 默认 normal 自动换行)
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
2. 多行文本溢出显示省略号
多行文本溢出显示省略号,有较大的兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webKit内核)
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient : vertical;
七、常见布局技巧--4种
1.margin负值的运用
2.文字围绕浮动元素
3.行内块的巧妙运用
4.CSS三角强化
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;