因为CSS是一门非常奇怪的语言。他有两条不同的学习曲线，一条是入门以后直线上升然后慢慢变得平坦，一条是稳定上升的斜线。打个比方，修一台电视机我们有两种方法: 一种是在外壳上敲敲打打，找到敲哪里敲几下的规律；另外一种是看一本电视机原理的大厚书，然后去拆开修。对应到CSS就是不停地试各种排列组合和读规范读权威指南。这两种方法其实没有高下之分，只有适用范围。如果只是用CSS做很简单的工作，那试一试很经济实惠，但如果经常跟CSS打交道，那么读规范就会节省大量跳坑排坑的时间。高票答案说CSS不正交化我不是很赞同，他举的三个例子都清楚写在了规范和权威指南里面。如果先读规范会觉得这些行为是自然而然的。我本人同时写JavaScript, Java, CSS, Python，在学习C++，但是并没有感觉到高票的所谓理性和感性的区别。你觉得它没有规律，也许只是因为你没有好好读规范。CSS是一门正儿八经的编程语言，请拿出你学C++或者Java的态度对待它，该看书看书，该查文档查文档。
CSS显示一个大图片中的多个小图标，主要是用background-position这个属性来控制的。
先看下面这张300*300的大图片，每个小图标是100*100的。(这张图片名字叫9pic2.jpg)
首先先将你要放置背景小图标的元素的大小设置成图片里图标的实际大小，用width和height设置，然后用background-image把背景图片放进去，比如：
.showImage{background-image: url(9pic2.jpg)
width: 100px
height: 100px
}
这么设置完毕后，大图片左上角那个小图标（这里假设是100*100的小图标）就出来了。
然后用background-position属性调整背景图片的位置，它有两个值分别表示背景图片沿着x和y轴移动的距离。你想象背景图片一开始是和当前元素左上角重合，但背景图片是可以移动的，由于浏览器坐标系x轴正向右，y轴正向下。所以，背景图片一般需要向左移动，和向上移动，这样移动的值往往都是负的。
比如上面第2张小图标，需要把大图片沿着x方向向左移动100px，y方向不变，设置background-position属性如下：
#item2{background-position: -100px 0
}
其他的同理。
最后贴出来一个例子，看明白了这个属性就懂了。
用到的另一张图片名字叫9pic1.jpg,先贴出来：
代码如下：
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>背景background-position切图</title>
<style>
.showImage{
background-image: url(9pic2.jpg)
width: 100px
height: 100px
}
.showImage:hover{
background-image: url(9pic1.jpg)
}
ul{
list-style: none
}
ul li{
float: left
margin: 20px
}
#item1{
background-position: 0 0
}
#item2{
background-position: -100px 0
}
#item3{
background-position: -200px 0
}
#item4{
background-position: 0 -100px
}
#item5{
background-position: -100px -100px
}
#item6{
background-position: -200px -100px
}
#item7{
background-position: 0 -200px
}
#item8{
background-position: -100px -200px
}
#item9{
background-position: -200px -200px
}
</style>
</head>
<body>
<div class="container">
<ul>
<li id="item1" class="showImage"></li>
<li id="item2" class="showImage"></li>
<li id="item3" class="showImage"></li>
<li id="item4" class="showImage"></li>
<li id="item5" class="showImage"></li>
<li id="item6" class="showImage"></li>
<li id="item7" class="showImage"></li>
<li id="item8" class="showImage"></li>
<li id="item9" class="showImage"></li>
</ul>
</div>
</body>
</html>
这个例子把那个图片打散，横排在页面上，还用:hover伪类实现了你鼠标移动到上面就从黑白变彩色。
Web前端的学习误区
网页制作是计算机专业同学在大学期间都会接触到的一门课程，而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver，这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。
入门快、见效快让我们在不知不觉中已经深深爱上了网页制作。此时，很多人会陷入一个误区，那就是既然借助这么帅的IDE，通过鼠标点击菜单就可以快速方便地制作网页。
那么我们为什么还要去学习HTML、CSS、JavaScrpt、jQuery等这些苦逼的代码呢?这不是舍简求繁吗?
但是随着学习的深入，就会发现我们步入了一种窘境——过分的依赖IDE导致我们不清楚其实现的本质，知其然但不知其所以然。
因此在页面效果出现问题时，我们便手足无措，更不用提如何进行页面优化以及完成一些更高级的应用了。其原因是显而易见的——聪明的IDE成全了我们的惰性，使我们忽略了华丽的网页背后最本质的内容——code。
那么我们应该怎么学习前端开发这门技术呢？ 现在很多小伙伴喜欢在互联网上找视频资料学习网页制作，但是光看视频你是不可能学会网页制作的，没有人指导你，而且很多视频已经过时了，并没有什么用! 如果你真的想学习网页制作这门技术，你可以来这个裙，前面是494，中间是零六思，最后是934！在这里有最新的HTML课程免费学习 也有很多人指导你进步，不需要你付出什么，只要你是真心想学习的，随便看看的就不要加了，加了也是浪费大家的时间。
正确的方向胜过无谓的努力
有两只蚂蚁想翻越一段墙，寻找墙那头的食物。一只蚂蚁来到墙脚就毫不犹豫地向上爬去，可是每当它爬到大半时，就会由于劳累、疲倦而跌落下来。虽然它不气馁，一次次跌下来，又迅速地调整一下自己，重新开始向上爬去
另一蚂蚁观察了一下，决定绕过墙去。很快，这只蚂蚁绕过墙来到食物前，开始享受起来而另一只蚂蚁还在不停地跌落下去又重新开始。
很多时候，成功除了勇气、坚持不懈外，更需要方向。也许有了一个好的方向，成功来得比想象的更快。如果在错误的路上奔跑,再怎么努力也是白搭。学习Web前端也是如此，首先应该选择一个正确的学习路线。
