精灵图
为什么需要精灵图？
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术（也称CSS Sprites、CSS雪碧）
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求即可。
精灵图的使用
- 移动背景图片位置，此时可以用
<background-position> - 移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同
- 因为一般情况下都是往上往左移动，所以数值是负值
- 使用精灵图的时候需要精确测量每个小背景图的大小和位置
三角形
网页中一些三角形可以直接使用css画出来
div{
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
}
鼠标样式
轮廓线outline
input{outline:none;}
input{outline:0;}
给表单添加以上样式取消边框线
防止拖拽文本域
实际开发中，我们文本域右下角是不可以拖拽的
textarea{resize:none;}
元素垂直对齐方式
vertical-align属性应用场景：经常用于设置图片或表单（行内块元素）和文字垂直对齐，只针对于行内元素和行内块元素有效
vertical-align:baseline |top |middle |bottom
baseline：默认。元素放在父元素的基线上
top:把元素的顶端与行中最高元素的顶端对齐
middle：把此元素放置在父元素中部
bottom：把元素顶端与行中最低的元素顶端对齐
解决图片底侧空白缝隙问题
由于行内块元素会和文字基线对齐
解决办法：
1. <vertical-align:middle|top|bottom>
2.display:block;
文本溢出显示省略号
单文本溢出
必须满足的条件：
- 先强调一行内显示文本
white-space:nowrap;(默认normal自动换行) - 超出部分隐藏
overflow:hidden; - 文字用省略号替代超出部分
text-overflow:ellipsis;
多文本溢出
有较大的兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）
broverflow:hidden;
text-overflow:ellipsis;
弹性伸缩盒子模型显示：
display:-webkit-box;
限制在一个块元素显示的文本的行数：
-webkit-line-clamp:2;
设置或检索伸缩盒对象的子元素的排列方式：
-webkit-box-orient:vertical;
margin负值的应用
css初始化
HTML5新增的语义化标签
<header>:头部标签<nav>:导航标签<article>:内容标签<section>:定义文档某个区域<aside>:侧边栏标签<footer>:尾部标签
注意：
- 这种语义化标准主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中，需要把这些元素转换为块级元素
- 移动端更常用
HTML5新增的多媒体标签
视频<video>
语法：<video src="文件地址" controls="controls"></video>
音频<audio>
语法：<audio controls> <source="" type=""></audio>
