精灵图
为什么需要精灵图
一个网页中往往会应用很多小的背景图像作为装饰,服务器就会频繁的接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。
因此,为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites,CSS雪碧等)
使用精灵图核心:
- 精灵技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中;
- 这个大图片也称为sprites精灵图或者雪碧图;
- 移动背景图片位置,此时可以使用background-position;
- 移动的距离就是这个目标图片的x和y坐标,注意网页中的坐标有所不同;
- 因为一般情况下都是往上往左移动,所以数值是负值;
- 使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。
使用精灵图核心总结:
- 精灵图主要针对于小背景图片使用;
- 主要借助于背景位置来实现 background-position;
- 一般情况下精灵图都是负值(千万注意网页中的坐标:x轴右边走是正值,左边走是负值,y轴同理)。
字体图标
字体图标的产生
使用场景:主要用于显示网页中通用,常用的一些小图标。
精灵图是由诸多优点,但是缺点很明显:
- 图片文件还是比较大的;
- 图片本身放大和缩小会失真;
- 一旦图片制作完毕想要更换非常复杂。
此时,有一种技术的出现很好的解决了以上问题,字体图标iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
字体图标的优点
- 轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求;
- 灵活性:本质其实是文字,可以随意的改变颜色,产生阴影,透明效果,旋转等;
- 兼容性:几乎支持所有的浏览器,请放心使用。
注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提示和优化。
总结:
如果遇到一些结构和样式比较简单的小图标,就用字体图标;
如果遇到一些结构和样式复杂一点的小图片,就用精灵图。
如何使用
- 字体图标的下载
- 字体图标的引用(引入到我们html页面中)
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
url('fonts/icomoon.woff?p4ssmb') format('woff'),
url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
3.字体图标的追加(以后添加新的小图标)(有需要就看视频叭!)
CSS三角
网页中常见的一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标
.box2 {
width: 0;
height: 0;
border:50px solid transparent;
border-top-color: pink;
margin:100px auto;
}
CSS用户界面样式
所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。
1.更改用户的鼠标样式
li {cursor:pointer}
设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状。
属性值 | 描述 |
default | 小白 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
2.表单轮廓
给表单添加outline:0;或者outline:none;样式之后,就可以去掉默认的边框。
input {
outline: none;
}
3.防止表单域拖拽
实际开发中,我们文本域右下角是不可以拖拽的。
textarea {
resize: none;
}
vertical-align属性应用
1.行内块和文字垂直居中对齐
使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直居中对齐。
官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。
img {
/* 让图片和文字垂直居中对齐 */
vertical-align: middle;
}
值 | 描述 |
baseline | 默认。元素放置在父元素的基线上 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
middle | 把此元素放置在父元素的中部 |
bottom | 把元素的顶端与行中最低的元素的顶部对齐 |
2.解决图片底部默认空白缝隙问题
bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。
主要解决方法有两种:
- 给图片添加vertical-align:middle | top | bottom等(提倡使用的);
- 把图片转换为块级元素display:block。
溢出的文字省略号显示
1.单行文本溢出显示省略号
三个条件:
/* 1.先强制一行内显示文本 */
white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
overflow: hidden;
/* 3.文字溢出的时候用省略号显示 */
text-overflow: ellipsis;
2.多行文本溢出显示省略号
多行文本溢出显示省略号,有较大兼容性问题,适合webKit浏览器或移动端(移动端大部分是webKit内核)
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
常见布局技巧
1.margin负值的运用
- 让每个盒子margin往左侧移动-1px,正好压住相邻盒子边框
- 鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置),如果有定位,则加z-index)
2.文字围绕浮动元素
3.行内块的巧妙运用
4.CSS三角强化
/* 1.只保留右边的边框有颜色 */
border-color: transparent pink transparent transparent;
/* 2.样式都是solid */
border-style: solid;
/* 3.上边框宽度要大,右边框宽度稍小,其余的边框该为0 */
border-width: 100px 50px 0 0;
}
CSS初始化
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化。
简单理解:CSS初始化是指重设浏览器的样式(也称为CSS reset)
每个网页都必须首先进行CSS初始化