【南大软院养成计划:第十五天】CSS应用——雪碧图

学JS进阶有点乏味了，偶尔穿插其他的学习内容来提提神，所以选了网页布局的CSS雪碧图的应用。

讲师的教学主线大概是这样的：

雪碧图原理→雪碧图的制作→制作完整的雪碧图效果（实战）

【雪碧图的应用场景】：
1，静态图片，不随用户信息的变化而变化
2，小图片，图片容量比较小（一些大图不建议拼成雪碧图）
3，加载量比较大

【雪碧图原理】：CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片在被整合的那个图片文件里的位置。

注意：一些背景图片整合到一张图片文件的原因：有效地减少Http请求数量，加速内容显示）

【如何做雪碧图】：

用工具CSSGaga，不仅能生成雪碧图，还能自动生成相应代码，非常方便，具体的还需自己实践了才能得出一些有用的经验。

说到工具，也转载分享几个不错的前端开发在线工具，分享给一起学习的小伙伴们

（1）在线代码测试工具：http://www.lvyestudy.com/tools/run_code.aspx；

（2）在线调色板：http://www.lvyestudy.com/tools/color_picker.aspx；

（3）CSS3圆角生成器：http://www.lvyestudy.com/tools/border_radius.aspx

【CSS雪碧图的应用】

这一部分更多的是写代码的部分了，所以就贴贴自己的感受，最深刻的感觉就是还是边实战边学习的效率最高了，也很有成就感，可以一直充满兴趣地学下去

写代码时，也有一些疑惑，有些是来自之前的基础知识有点遗忘了，有的是可能之前学的不够仔细，提的问题不够多，所以到了应用时显现了出来，如li h3{...}和h3{...}的区别...又如<div>...</div>为何被称做容器，又有什么存在的意义...感觉这个忘了就有点说不过去了，太基础了...会补回来的，发现问题，解决了不就行了，嗯。
【课后WIKI】

CSS display:inline和float:left两者区别：

①display:inline:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示)

②float:left:指定元素脱离普通的文档流而产生的特别的布局特性。并且float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者可以说如果应用了float这个元素将被指定为块级元素。

那么两者的区别显而易见:display:inline元素不能设置宽高，因为它属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。

简单的说就是float可以设置宽高，然而display:inline;虽然也会浮动，但是他不能设置宽高。