还记得我们为什么使用SCSS/LESS等CSS预处理器吗？我想很大一部分人是因为变量和嵌套语法。变量让我们可以很方便的去管理整个系统（网站）中的主题；嵌套语法则可以让我们更好的去组织和编写CSS代码，且让我们的样式文件有了最初始的命名空间或者说是作用域的概念（我们可以把某个模块的代码都放在一个唯一的container当中，这个container就是一个作用域）。至于如条件语句/函数这些特性，如果你不是去开发如Bootstrap/Element-ui 等这些库的样式，在常规的项目编程中通常用到的很少。
看到这个标题的时候，很多人可能会像我一样，脑海里会一下子跳出CSS3的方案来。的确如此，CSS3是实现渐变文字最简单直接的方案，本站就有很多用CSS3实现的双色水平渐变的文字实例。我这里把描述突然从炫彩字转到了渐变字，两者的概念一样吗？我不知道，可能只是各个行业的叫法不一而已。我所在的行业是为LED显示屏提供云节目制作和发布服务的，行业内把这种文本称之为炫彩字媒体，比如大街上司空见惯的显示屏上写着诸如“欢迎光临”的五彩斑斓的文字。受阻于业务需要，CSS的方案是我们最先Pass掉的，为什么呢？
一直以来，CSS作为一种申明式的样式标记语言，很难像如javascript等命令式编程语言一样通过定义和使用变量的方式来维护和追踪某些状态。后来随着scss,less等CSS预处理器的出现，我们可以像优秀的开源框架bootstrap那样，通过维护一个_variables.scss变量文件的方式来维护一个庞大的项目。但预处理需要编译，并非CSS原生支持。而现在，我们可以在原生CSS中使用变量了！
在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇文章，将继续在CSS技巧方面进行探讨，不同于前两篇的是，本文将着重介绍CSS中伪类和伪元素在项目中的应用场景。伪类相信大家最熟悉也是用的最多的莫过于:hover, :active, :focus之类的，因为这些在平常的项目中太常用了（然而我目前依然见过还有用js去添加.hover类来变化背景色的同学😴）。而伪元素如:before, :after相信大家也用的烂熟了。 当然对于比较常见的伪类（元素）不在本文的讨论范围类，本文主要介绍一些生僻的但是又非常实用的伪类(元素)。CSS的世界已经变天了，抛开过去，拥抱变化吧~
在上文《你不知道的CSS（一）》中，介绍了兄弟选择器美化表单，font-size:0消除间隙，overflow清除浮动，border绘制三角形等7个实用技巧。由于文章长度限制，还遗留了一些技巧没有介绍，考虑到日后可能会有更多的技巧需要补充进来，便将上文改名为你不知道的CSS（一），名字其实有点浮夸，希望能完善为一个系列，也希望该系列中介绍的技巧能够帮助到更多人解决实际开发中遇到的问题。在这里感谢SegmentFault的小编在微博上的推荐。本文将重点介绍CSS中未知高度容器的垂直居中技巧。同样每个技巧将结合demo或者图示来说明（如果demo无法打开，请自备梯子，原因你懂得🙀）。
CSS的世界是神奇的。
随着各浏览器WEB标准的日趋统一，CSS在WEB世界中扮演的角色也愈发的重要。甚至于在GitHub上出现了You-Dont-Need-JavaScript这样Star近万的优秀开源项目，抛开该项目的实用性不说，项目中的众多的DEMO就已经证明了CSS的强大。
当然，这篇文章不是为了介绍这个项目，而是整理了一些实用的CSS技巧，来解决我们在实际项目开发中遇到的的问题。文章也会长期更新，总结更多的技巧。每个技巧将结合demo或者图示来说明（如果demo无法打开，请自备梯子，原因你懂得🙀）。也许你此刻正在发愁的一个bug可以在这里找到答案😆。
分页是WEB开发中很常用的功能，尤其是在各种前后端分离的今天，后端API返回数据，前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代，分页功能都是必不可少的。
分页大多数（基本上）情况下都是对异步数据列表的处理，这里首先需要明白一下分页的流程。
在已知每页显示数据量pageSize以及当前页码pageIndex的情况下：
JavaScript的window对象对应着浏览器窗口本身，因此这个对象的属性和方法统称为BOM（浏览器对象模型），如window.open(),window.location等。
JavaScript的document对象是指文档对象模型，主要是处理网页内容。DOM（Document Object Model）即文档对象模型，是针对 HTML 和 XML 文档的 API 。字母D指document（文档），字母O指object（对象），字母指Model（模型）。DOM 描绘了一个层次化的节点树。节点表示一个连接点，文档是由节点构成的集合，DOM的节点主要分为三类：元素节点、文本节点（不是文本内容）、属性节点。
偶然间发现这篇文章，可以说，这是我见到的对移动rem单位做的最详细，最细心的一篇总结性文章，果断转载至本博客，以便有需要的同志们研究。
本文结合作者（流云诸葛）对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值。
新浪微博开放平台（http://open.weibo.com/）提供了大量的接口API，如粉丝，微博，评论，用户读取等26个接口，共分为微博相关API，公共服务API，地理信息API等三大板块API。开发者只需注册开放平台App Key，即可利用开放平台提供的API测试工具测试各个不同的接口。本站很多地方都用到这些接口，如留言板中的地理位置，博客右侧的新浪用户卡片……
本文主要说的是利用新浪用户读取（https://api.weibo.com/2/users/show.json）接口生成一个漂亮的用户微博卡片。新浪接口授权相对严格，而此接口需要access_token和（uid或screen_name）两个必填参数，其中参数uid与screen_name二者必选其一，且只能选其一；并且接口升级后，对未授权本应用的uid，将无法获取其个人简介、认证原因、粉丝数、关注数、微博数及最近一条微博内容。 完整URL如下：https://api.weibo.com/2/statuses/public_timeline.json?access_token=你的access_token&uid=要获取信息的用户uid，该接口返回一个包含了该用户各种信息的json对象。
有网友@she在留言中询问本站音乐播放器如何实现，博客也好久没更新了，趁着清明放假有点时间，分享一下实现过程。这是一个很简单的播放器效果，界面主要利用CSS3的一些属性，如animation、translate、transform等，效果则利用Html5 Audio属性配合JS实现。播放器相对简洁且未实现列表播放、音量控制、歌词展示等相对复杂的功能，如需实现诸如酷狗音乐的播放器效果，请深入研究Audio。个人认为，该播放器足以满足博客等非音乐网站的需求。当然，诸如以往，以上包括这句都是废话：）
