精灵图
why
减少服务器接受和发送请求的次数,提高页面的加载速度,出现CSS精灵技术
核心原理:将网页中的一些小背景图像整合到一张大图中,服务器只需要请求一次
减少服务器接受和发送请求的目的
使用
针对背景图片的使用,把多个小背景图片整合到一张大图里面
sprites 精灵图 或者 雪碧图
移动背景图片位置,background-position
基本为负值
缺点
图片文件较大
图片本身放大缩小会失真
制作完毕想要更换非常复杂
字体图标
显示网页中通用的小图标
what
iconfont
展示的是图标,本质属于字体
优点
轻量级
灵活性
兼容性
总结
不能代替精灵技术,对工作中图标部分技术的提升和优化
1.如果遇到一些结构和样式比较简单的小图标,就用字体图标
2.如果遇到一些结构和样式比较复杂的小图片,就用精灵图
下载
网站:
iconmoon inconmoon.io
inconfont iconfont.cn
引用
放入根目录
CSS三角
盒子没有大小,设置border
CSS用户界面样式
鼠标样式
li {cursor:pointer;}
default-小白/pointer-小手/move-移动/text-文本/not-allowed-禁止
表单轮廓
轮廓线
给表单添加 outline:0/none
防止拖拽
textarea{resize:none;}
vertical-align
垂直对齐,针对行内元素或者行内块元素有效
vertical-align:top/middle/base/bottom
默认基线对齐
应用
解决图片底部默认空白缝隙
1.给图片添加vertical-align:middle/top/bottom
2.把图片转化为块级元素display:block;
溢出的文字省略号表示
单行文本
1.先强制一行内显示
white-space:nowrap;(默认normal自动换行)
2.超出的部分隐藏
overflow:hidden;
3.用省略号代替超出的部分
text-overflow:ellipsis;
多行文本(了解)
有兼容性问题
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
常见布局技巧
margin负值的运用
?依然存在疑问
文字围绕浮动元素
行内块的巧妙运用
CSS三角强化
左边和下边的边框宽度设为0,把上边的宽度调大,颜色设为transparent
CSS初始化
unicode编码字体
将中文转化为相应的unicode编码,避免浏览器解释CSS时候出现乱码
黑体\9ED1\4F53
宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1