杰拉斯的博客

很久之前就想具体地研究一下CSS Sprites了，今儿个看到微博UDC的这篇文章，赶紧转来，已经很晚了，留待有空研究= =。。

CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题，我们又怎样合理使用这个技术呢？下面让我们详细的聊聊。

在大家还在拨号上网的“远古时期”，由于网速的限制，页面开发者都喜欢把网页里面的图片字节数控制的非常小，往往在一个图片文件夹里散落着n多的小碎图。随着网络技术的发展，网速的提升，大家越来越重视页面的加载速度，页面效率问题，过去的那些小图便成为了前端开发者的眼中钉，因为每加载一张图片都会产生一次浏览器请求数，发起的请求数越多那么页面加载的速度也越慢。还有当页面加载时，图片一个个的零星显示，鼠标经过时候背景闪白等也都是我们不能忍受的。于是乎将页面中的背景图整合到一起，利用“background-image”，“background- repeat”，“background-position”的组合进行背景定位的技术被广泛使用与了页面构建中，这就是CSS Sprites。当然CSS Sprites技术也存在着维护不便，内存占用大等等的缺点。

好了，如果我只说这些，那么这篇文章就有点太水了。前面那些只是对CSS Sprites技术的一个普及。作为一个开发者我们应该对它有一个更全面的认识，挖掘深度内容，这样才能有利于我们效率开发，团队协作。

(阅读全文…)

浏览器中对于英文、数字超出容器宽度的处理是将整个不包含空格的单词换行，而不将单词及数字截断，这种处理是人性化的，但有时候遇到超长英文或数字时，却因为这种处理方式而导致容器宽度被撑大，致使页面非常难看，而通过CSS我们可以使其强制换行：

word-break: break-word;

或

word-break: break-all;

或

word-wrap: break-word;

如[ACM_HDU_1297]Children’s Queue一文中，题目中的英文单词仍人性化判断是否换行，而下面的超长数字则强制自动换行。

• 头部：header
• 内容：container
• 尾：footer
• 导航：nav
• 侧栏：sidebar
• 栏目：column
• 页面外围控制整体布局宽度：wrapper wrap
• 左右中：left right center
• 登录条：loginbar
• 标志：logo
• 广告：banner
• 页面主体：main
• 热点：hot
• 新闻：news
• 下载：download
• 子导航：subnav
• 菜单：menu
• 子菜单：submenu
• 搜索：search
• 友情链接：link
• 页脚：footer
• 版权：copyright
• 滚动：scroll
• 内容：content
• 标签页：tab
• 文章列表：list
• 提示信息：msg
• 小技巧：tips
• 栏目标题：title
• 加入：joinus
• 指南：guild
• 服务：service
• 注册：regsiter
• 投票：vote
• 合作伙伴：partner
• 摘要:summary
• 按钮：btn
• 标签页：tab
• 当前的:current
• 小技巧：tips
• 图标:icon
• 注释：note