CSS高级技巧
一、 精灵图
1. 精灵技术的目的
为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度
2. 精灵图(sprites)的使用
使用精灵图核心:
- 精灵技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中
- 这个大图片也称为sprites精灵图或雪碧图
- 移动背景图片位置,此时可以使用background-position
- 移动的距离就是这个目标图片的x和y坐标,注意网页中的坐标有所不同
- 因为一般情况下都是往上往左移动,所以数值是负值
- 使用精灵图的时候需要精确测量,每个小背景图片的大小和位置
二、 字体图标
1. 字体图标的产生
使用场景:主要用于显示网页中通用、常用的一些小图标
缺点
- 图片文件还是比较大的
- 图片本身放大和缩小会失真
- 一旦图片制作完毕想要更换非常复杂
解决方法
- 字体图标
- 展示的是图标,本质属于字体
优点
- 轻量级:一个图标字体要比一系列的图形要小。一旦字体加载了,图标就马上会渲染出来,减少了服务器请求
- 灵活性:本质其实是文字,可以很随意的改变颜色。产生阴影、透明效果、旋转等
- 兼容性:几乎支持所有浏览器
- 字体图标不能代替精灵技术,只是对工作中图标部分技术的提升和优化
- 遇到结构和样式比较简单的小图标,就用字体图标
- 遇到一些结构和样式复杂的小图片,就用精灵图
三、SCC三角做法
语法:
div {
width: 0;
height: 0;
下面两行是为了解决兼容问题
line-height:0;
font-size: 0;
border: 50px solid transparant;
border-left-color: pink;
}
四、CSS用户界面样式
1. 鼠标样式cursor
li {
cursor: pointer;
}
属性值 | 描述 |
---|---|
default | 白色箭头(默认) |
pointer | 小手样式 |
move | 移动样式 |
text | 文本样式 |
not-allowed | 禁止样式 |
2. 轮廓线 outline
去掉表单(搜索框)默认的蓝色边框
input {
outline: none;
或者
outline: 0;
}
3. 防止拖拽文本域resize
textarea{
resize: none;
}
五、vertical-align属性应用
行内块或行内元素才有这个属性
经常用于设置图片或者表单(行内块元素)和文字垂直对齐
值 | 描述 |
---|---|
top | 把元素顶端与行中最高元素的顶端对齐 |
middle | 把此元素放置在父元素的中部 |
baseline | 默认。元素放置在父元素的基线上 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
解决图片底部默认空白缝隙问题
原因:行内块元素会和文字的基线对齐
两种解决方法:
- 给图片添加vertical-align: middle|top|bottom等
- 把图片转换为块级元素:display: block;
六、溢出的文字省略号显示
1. 单行文本溢出显示省略号,必须满足三个条件
1.先强制一行内显示文本
white-space: nowrap;(默认normal自动换行)
2.超出的部分隐藏
overflow: hidden;
3.文字用省略号替代超出的部分
text-overflow:ellipsis;
2. 多行文本溢出显示省略号
有较大兼容性问题,适合于webkit浏览器或移动端
overflow: hidden;
text-overflow: ellipsis;
弹性伸缩盒子模型显示
display: -webkit-box;
限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;
盒子的宽度和高度要严格定好