line-height和vertical-align在CSS中是两个简单的属性。如此简单，大多数人都相信自己已经完全理解它们是如何工作的以及如何使用它们。但事实上并不如此。他们其实很复杂，也是CSS中难点之一，而且也是CSS中特性之一：内联格式化上下文（inline formatting context）。比如可以设置line-height带有长度单位的值或一个无单位的值，但其默认值是normal。那么在CSS中normal是什么呢？我们常常认为它是（或者应该是）1或者1.2，甚至也可以说，CSS规范都不清楚是哪一个。我们也知道，没有单位的line-height是相对于font-size的，但问题是,font-size: 100px;在使用不同的字体（font-family）表现的行为是不一样的，所以line-height总是相同或不同的吗？真的是1还是1.2吗？另外vertical-align对line-height的影响又是什么呢？要深入研究CSS的机制可以说没有这么简单......

JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。初始接触它的人都觉得好简单，实际上真的如此么？这里记载下，一路对其使用姿势变迁的历程。

如果你也喜欢萌萌的百度熊，如果你也喜欢SVG，如果你也喜欢动画，那一起动手来写写这个Demo。看看如何使用SVG写一个会动的，萌萌的百度熊

几周前，CSS变量，更准确的说是CSS自定义属性——发布在Chrome Canary版的Experimental Web Platform Features flag。Chrome的工程师@Addy Osmani首次在推特发布时，遭遇到了惊人的否定，敌意及怀疑。至少我很吃惊，鉴于我对这个属性是如此兴奋。

这篇文章介绍了Flexbox模块所有基本概念，而且是介绍Flexbox模块的很好的一篇文章，所以这篇文章非常的长，你要有所准备。学习Flexbox可不是件很有趣的事情，因为它将挑战你所知道的CSS布局方面的知识。当然这也是非常正常的，因为一切知识都是值得学习的。另外你要认值对待Flexbox。因为它是现代Web布局的主流方式之一，不会很快就消失。它也成为一个新的W3C标准规范。既然如此，那让我们张开双臂，开始拥抱它吧！

腾讯系互联网券商——富途证券web前端团队招人啦！！！富途证券是一家为投资者提供港股和美股交易服务的互联网券商，创始人为前腾讯第18号员工…… **toobug@futu5.com **等你来！

在CSS中有些属性是允许CSS绘制图形形状，比如常见的是使用border或者box-shadow来绘制图形或者形状。除此之外，在CSS中还有类似circle()函数也可以绘制圆形。除此之外，在CSS中有一些形状是为CSS其它属性服务，比如clip-path为mask服务和在shape-outside让文本围绕形状排版。还有一些CSS属性使用像SVG中的图形做一些事情，比如offset-path中使用path()函数实现路径动画。而其中path()是一个非常棒的功能，可以绘制任何图形。在接下来的内容中，来介绍一下CSS中的基本图形和路径。希望对大家有所帮助。

最早接触到CSS Exclusions名词是在2013年@Peter Gasston写的《The future of CSS layouts》（译文点击这里）。至于“Exclusions”译成中文不知道使用什么词更为合适，文章下面暂且直接使用英文，或许更好些。

当浏览器从服务器接收到一个HTML页面的请求时，到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行，或者说渲染出来我们常常称之为“关键渲染路径”（Critical Rendering Path）。理解CRP（Critical Rendering Path）相关的知识可以更好的提高网站的性能。