一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁的接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效的减少服务器接收和发送请求的次数，出现了CSS精灵技术（也成CSS Sprites 、CSS 雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大的图片中，这样服务器只需要一次请求就可以了。
使用核心：
精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。这个大图片也称为sprites 精灵图或雪碧图。我们来看一下王者荣耀官网的精灵图是什么样子的。
首先打开王者荣耀官网。
F12打开源代码，选中右边的“下载游戏”然后在Style中看到图片的url，右键在新的页面中打开。
我们就看到王者荣耀官网的雪碧图是什么样子的了。
使用的时候主要通过移动背景图片的位置，此时可以使用background-position。
移动的距离就是这个目标图片的x和y坐标。
一般情况下，往上往左移动都是负值。
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
总结： 精灵图主要针对于背景图片使用。主要借助于背景位置使用：background-position注意网页中的x轴向左y轴向下，要想向上向左移动，坐标是负值。当我们要显示一个小的背景图片时，只需要测量出它的坐标就可以使用了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>精灵图使用</title> <style> .box { width: 60px; height: 60px; margin: 50px auto; background: url(images/index.png); background-position: -182px 0; } </style> </head> <body> <div class="box"> </div> </body> </html>字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
总结：
如果遇到一些结构和样式比较简单的小图标，就用字体图标。如果遇到一些结构样式比较复杂的小图片，就用精灵图。字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用分为：
字体图标的下载。字体图标的引入（引入到html页面中）字体图标的追加（以后添加新的小图标）推荐网站：
icomoon字库
阿里iconfont字库
使用阿里妈妈下载需要拥有github账号或者新浪微博账号，然后就可以免费使用了。
选择好对应的字体图标添加到收藏，然后一起下载下来。
将下载好的文件夹导入根目录下，用link标签引入CSS文件，然后输入指定的类名就可以使用了。
网页中我们经常看到盒子旁边有一个小三角，像小米官网首页这个这样：
我们来看看这是如何制作的呢？
.box1 { width: 0; height: 0; border-top: 10px solid pink; border-right: 10px solid purple; border-bottom: 10px solid blue; border-left: 10px solid burlywood; }当我们给一个盒子设置宽度高度都是0，然后设置四个边框。
我们再将三个边框设置成透明的试试。
.box2 { width: 0; height: 0; border: 10px solid transparent; border-top-color: skyblue; margin: 100px auto; }看到了中间一个蓝色的小三角，方向也可以将border-top更改成其他的来控制。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css三角</title> <style> .jd { position: relative; width: 120px; height: 249px; background-color: pink; } .jd span { position: absolute; right: 15px; top: -10px; width: 0; height: 0; /* 为了照顾兼容性 */ line-height: 0; font-size: 0; border: 5px solid transparent; border-bottom-color: red; } </style> </head> <body> <div class="jd"> <span></span> </div> </body> </html>我们只需要再用定位来确定一下小三角的位置就可以了。
我们正常写一个表单会有默认的边框，而一般网页都没有这个边框。
给表单添加outline:0或者outline:none样式之后，就可以去掉默认的表单边框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>样式</title> <style> input { outline: none; } </style> </head> <body> <ul> <input type="text"> </ul> </body> </html> 防止拖拽文本域 resize我们的正常使用文本框textarea右下角会有一个拖拽按钮，可以进行拖拽。
而一般网页中都要防止这个拖拽。
我们只需要添加resize:none就可以防止拖拽了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>样式</title> <style> textarea { resize: none; } </style> </head> <body> <ul> <textarea name="" id="" cols="30" rows="10"></textarea> </ul> </body> </html>使用场景：经常用于设置图片或者表单（行内元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效。
语法：vertical-align: baseline|top|middle|bottom
值描述baseline默认。元素放在父元素的基线上。top把元素的顶端与行中最高元素的顶端对齐。middle把此元素放置在父元素的中部。bottom把元素的顶端与行中最低的元素的顶端对齐。给图片设置了vertical-align: bottom之后：
设置了vertical-align: middle之后：
bug：图片地测会有一个空白的缝隙，原因是行内块元素默认会和文字的基线对齐。
主要的解决方法有两种：
给图片添加vertical-align: middle | top |bottom（提倡使用） 把图片转换成块元素display :block。一这是常见一种高级技巧，文字填充不下用省略号代替。
单行文本溢出省略号。 必须满足三个条件：先强制一行内显示文本：white-space: nowrap（默认normal自动换行）超出部分隐藏：overflow: hidden文字用省略号代替超出部分：text-overflow: ellipsis <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...</title> <style> div { width: 150px; height: 80px; background-color: pink; margin: 100px auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div> 啥也不说了，此处省略一万字！ </div> </body> </html> 多行文本溢出显示省略号多行文本溢出显示省略号，有较大的兼容问题，适合用于webKit浏览器或移动端（移动端大部分是webkit内核）
overflow: hidden; text-overflow: ellipsis; /*弹性伸缩盒子模型显示*/ display: -webkit-box; /*限制在一个块元素显示的行数*/ -webkit-line-clamp: 2; /*设置或检索伸缩盒子对象的子元素的排列方式*/ -webkit-box-orient: vertical;当我们写边框的时候有重叠问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...</title> <style> ul li { float: left; list-style: none; width: 150px; height: 200px; border: 1px solid red; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>我们只需要添加一行：margin-left: -1px就可以隐藏掉，只显示1px边框了。
如果需要添加鼠标移入边框变色的效果，可以通过设置相对定位或者添加z-index属性来完成。
ul li:hover { position: relative; border: 1px solid blue; } ul li:hover { z-index: 1; border: 1px solid blue; }给父元素添加text-align: center其中所有的行内块元素都会水平居中对齐。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...</title> <style> .box { text-align: center; } .box a { display: inline-block; width: 36px; height: 36px; background-color: #f7f7f7; border: 1px solid #cccccc; text-align: center; line-height: 36px; text-decoration: none; color: #333333; font-size: 14px; } .box .prev, .box .next { width: 85px; } .box .current, .box .elp { background-color: #ffffff; border: none; } .box input { height: 36px; width: 36px; border: 1px solid #cccccc; outline: none; } .box button { width: 60px; height: 36px; background-color: #f7f7f7; border: 1px solid #cccccc; } </style> </head> <body> <div class="box"> <a href="#" class="prev"><<上一页</a> <a href="#" class="current">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#" class="elp">...</a> <a href="#" class="next">>>下一页</a> 到第 <input type="text"> 页 <button>确定</button> </div> </body> </html>类似京东中的这类的制作用到了CSS三角强化。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...</title> <style> .box { width: 0; height: 0; border-top: 100px solid transparent; border-right: 50px solid red; border-bottom: 0; border-left: 0; } </style> </head> <body> <div class="box"> </div> </body> </html>我们只需要将左边和下面的边框宽度设置为0，将上边框的宽度调大。
简写：
border-color: transparent red transparent transparent; border-style: solid; border-width: 100px 50px 0 0;再设置位置即可。
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...</title> <style> .price { width: 200px; height: 24px; line-height: 24px; border: 1px solid red; margin: 0 auto; } .miaosha { position: relative; float: left; width: 110px; height: 100%; background-color: red; text-align: center; color: #ffffff; font-weight: 700; margin-right: 15px; } .miaosha i { position: absolute; right: 0; top: 0; width: 0; height: 0; border-color: transparent #ffffff transparent transparent; border-style: solid; border-width: 24px 10px 0 0; } .origin { font-size: 12px; color: gray; text-decoration: line-through; } </style> </head> <body> <div class="price"> <span class="miaosha"> ￥2297.00 <i></i> </span> <span class="origin"> ￥3999.00 </span> </div> </body> </html>不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS进行初始化。
简单理解：CSS初始化是指重设浏览器样式（CSS reset）。
我们打开京东网页的源代码，看看人家的初始化设置：
复制粘贴过来，再加点注释：
/* 把所有标签的内外边距清零 */ { margin: 0; padding: 0 } /* em和i斜体文字不倾斜 */ em, i { font-style: normal } /* 去掉li的小圆点 */ li { list-style: none } img { /* 照顾低版本浏览器，如果图片外面包含链接会有边框问题 */ border: 0; /* 取消图片底层有空白间隙的问题 */ vertical-align: middle } button { /* 当鼠标经过button按钮的时候，鼠标变成小手 */ cursor: pointer } a { color: #666; text-decoration: none } a:hover { color: #c81623 } button, input { font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif } body { /* 抗锯齿性，让文字显示的更加清晰 */ -webkit-font-smoothing: antialiased; background-color: #fff; font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; color: #666 } .hide, .none { display: none } /* 清除浮动 */ .clearfix:after { visibility: hidden; clear: both; display: block; content: "."; height: 0 } .clearfix { *zoom: 1 }