CSS高级技巧

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;

盒子的宽度和高度要严格定好