什么是css sprites?
css sprites：精灵图（雪碧图）：把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量
css sprites优点：
1、减少网页的HTTP请求，提高页面性能2、图片命名上的困扰
3、更换风格方便
css sprites缺点：
1、必须限定容器大小，符合背景图片元素的位置，需要计算2、维护比较麻烦
css sprites使用步骤：
1、制作一张具有多状态的拼合图片，需要按照一定规律处理
2、给要显示背景的盒（一个固定尺寸，宽width、高height），以背景的方式加载，让其局部显示
3、通过背景图定位（background-position）控制不同的显示状态
css sprites应用实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧图实现原理</title>
</head>
<style>
ul,h3{
margin: 0;
padding: 0;
}
h3{
display: block;
margin: 0;
padding: 0;
}
.cat{
position: relative;
width: 150px;
background-color: #f8f8f8;
border: 1px solid #bbb;
}
li{
z-index: 2;
position: relative;
display: block;
height: 31px;
line-height: 31px;
overflow: hidden;
margin: 1px 10px 0;
vertical-align: bottom;
border-bottom: 1px solid #dedede
}
li:hover{
background-color:#666666;
}
li h3{
font-size: 13px;
font-weight: 400;
}
li i{
display: inline;
float:left;
margin: 3px 10px 0 0;
height: 24px;
width: 30px
}
/* 在这里补充雪碧图的样式 */
li>i{
background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg');
}
.cat-2>i{
background-position:0 -24px;
}
.cat-3>i{
background-position:0 -48px;
}
.cat-4>i{
background-position:0 -72px;
}
.cat-5>i{
background-position:0 -96px;
}
.cat-6>i{
background-position:0 -120px;
}
.cat-7>i{
background-position:0 -144px;
}
.cat-8>i{
background-position:0 -168px;
}
</style>
<body>
<div class="cat">
<ul>
<li class="cat-1"><i></i><h3>服装内衣</h3></li>
<li class="cat-2"><i></i><h3>鞋包配饰</h3></li>
<li class="cat-3"><i></i><h3>运动户外</h3></li>
<li class="cat-4"><i></i><h3>珠宝手表</h3></li>
<li class="cat-5"><i></i><h3>手机数码</h3></li>
<li class="cat-6"><i></i><h3>家电办公</h3></li>
<li class="cat-7"><i></i><h3>护肤彩妆</h3></li>
<li class="cat-8"><i></i><h3>母婴用品</h3></li>
</ul>
</div>
</body>
</html>css自动省略号...，通过css实现单行、多行文本溢出显示省略号
网页开发过程中经常会遇到需要把多行文字溢出显示省略号，这篇文章将总结通过多种方法实现文本末尾省略号显示。
深入理解letter-spacing,word-spacing的对比区别
word-spacing 属性增加或减少单词间的空白（即字间隔）。 letter-spacing 属性增加或减少字符间的空白（字符间距）。
整理一下CSS最容易躺枪的二十规则，大家能躺中几条？
满屏div之css最容易中枪的二十条规则，你中枪了吗？一、float:left/right 或者 position: absolute 后还写上 display:block？二、认为布局就是 Float，所有的地方都是 Float，全家都是 Float！
如何编写轻量级 CSS 框架
我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 CSS 框架。大多数的轻量级框架只是 CSS 框架，不涉及 JS 部分，主要用于网页的布局。
精简CSS代码，提高代码的可读性和加载速度
定义简洁的CSS规则：CSS的每条规则中都包含了规则的属性及属性值。定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值。
css完美解决网页在iphoneX的头部刘海显示问题
css完美解决iphonX白条,网站扩展到整个屏幕,CSS Shapes中有个CSS属性名为shape-outside实现元素滚动自动环绕iPhone X刘海
css中 出现height为100%失效的原因及解决方案
我们都知道需要给html和body标签设置了高度height:100%之后，再给内部的div设置height:100%的时候，内部div的高度100%才会起到作用。这是由于：%是一个相对父元素计算得来的高度，要想使他有效，我们需要设置父元素的height。
CSS3 clip-path 用法介绍
clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。
CSS中可以和不可以继承的属性
这篇文章整理css中无继承性的属性、继承性的属性、所有元素可以继承的属性、内联元素可以继承的属性、块级元素可以继承的属性
你知道我们平时在CSS中写的%都是相对于谁吗？
编写CSS的时候，经常会用到百分比赋值（%）实现自适应。像我们最常使用的流式布局设计模式，基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!