背景是加载i标签里的 如果不加i标签等于没有控制 默认位置为0，0

检查一下定位有没有生效

由你需要的图片在大图中的位置决定

因为h3标签是块元素，为了在同行显示

System.out.println();表示输出信息换行显示 System.out.print();表示不换行显示

qhfclzexujadtuvhbtedfmudtspymshuyjudwfshpmesnbatkyzjhqnxbyximflhcazpehiviebjqienozjnnnwuivcfdphfdnyfytzfmexsh

24px？

 .cat ul li i{

                float: left;

                width: 30px;

                height:24px;

                margin: 3px 3px 0 0;

                background: url(sidebar.png);

                display: inline;

            }

去掉.cat ul ，这是因为优先级的问题。

是的， li本来就是块级标签，这个设置是没必要的。去掉效果也是一样的。

上面的同学完全在误导人啊，i标签本来就是内联元素，这里不设置display:inline也是可以的。去掉效果一样，写上也没问题，老师说了，为了语义化。   内联元素是不支持宽高，可以使它变成块级或行内块级来设置宽高。这里使用了另一种方式，让它浮动。

第一次请求就会把图片放到缓存里，后面会先从缓存里查找。

有可能是选择器的问题哦，看下是不是被层叠掉了。即后来的背景定位属性的选择器比重要够大。。

元素定义了浮动float就不需要设置display了，因为浮动的元素脱离正常的流且变成块元素，所以无需设置display:inline，但是需要设置width和height

因为h3是块级元素，块级元素前换行，后换行，这里换行是h3标签带来的。

只有块级元素才有宽高

把文字放到 i 标签的外面就好了，        背景图片本来就是做背景的，不在文字背后怎么能叫背景

如果页面简单，可以不加，但是如果页面复杂，多处用到i标签，而各个i标签的样式又不一样，就需要加上i的父元素，这样代码执行才不会出错

行内元素都没有宽高

因为代码中有一个float : left ，，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

都是可以的  只不过这样的性能浪费 太大了

css背景图中的坐标是以左上角顶点为原点，向右的x方向为正方向，向下的y方向为正方向，并非是以数学上的象限规则。

h3,ul,li{margin: 0;padding: 0;}

ul{list-style: none;}

li h3{font-size: 14px;font-weight: 400}

li{display: block;height: 31px;line-height: 31px;overflow:hidden;border-bottom: 1px solid #dedede}

li i{background: url(img/sidebar.png);display: inline;width: 30px;height: 24px;float: left;margin: 5px 5px 0 5px;}

.cat{width: 150px;background: #f8f8f8;border: 1px solid #bbb;}

.chart-1 i{background-position: 0 0;}

.chart-2 i{background-position: 0 -24px;}

得这么写

因为Li是块级元素

不是的，他是把整个sprite图作为<i>元素的background（背景），然后整个sprite图默认以左上角为坐标轴（0，0),然后调整整个图片的位置来显示<i>元素背景，每一个<i>元素都有一个独立的sprite图，例如（-40px，0）就是整块图片向左移动（x轴）移动40px ，上下（y轴）不偏移

是定义 但是现在用更多时候是为了语义化

不同浏览器中的默认值不一样，为了防止兼容性的问题，所以手动设置为inline

图片路径不对

设置成inline-block  在设置margin的时候在ie6下容易双倍边距

不同浏览器默认值有些不一样，所以网页设计时，最好都明确定义，免得不同浏览器效果不一样