CSS 的伪类选择器和伪元素选择器，让 CSS 有了更为强大的功能。 有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持下面这两种表示方式。…

我们都知道对于网站来说，性能至关重要，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。因此，与其相关的性能优化是不容忽视的。 对于性能优化我们常常在项目完成时才去考虑，经常被推迟到项目的末期，甚至到暴露出严重的性能问题时才进行性能优化，相信大多数人对此深…

两行 CSS 代码实现图片任意颜色赋色技术

前不久写了一篇关于如何使用 Chrome DevTools 优化高德地图动画的文章，其中提到了 composite，但是并没有细谈。思考许久，还是觉得有必要再总结一下。

骨架页面（Skeleton Page）指的是当你打开一个 H5 页面，在页面解析和数据加载之前，首先给用户展示页面的大概样式。在骨架页面中，图片、文字、图标都将通过灰色矩形块来展示，在真实页面展示之前，用户能够感知到即将加载页面的基本 CSS 样式和页面布局。饿了么移动 web…

原本我的文章标题是深入探讨line-height与vertical-align的疑难杂症，但这样似乎没能针对性的抛出一个问题，故改成“彻底搞定vertical-align垂直居中不起作用疑难杂症”。因此，本文讲解的还是line-height和vertical-align。至于各…

前几天看了一篇文章 ， 颠覆了我对 CSS 认识，心中无数次蹦出一个念头：'卧槽，卧槽，还能特么这么用，这特么太叼了' ... 本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before 、::after 伪元素，transparent 、borde…

什么是字号大小？字号大小就是字体的高度，例如设置字号为50px，那么它的高度如下图所示： 什么是行距呢？如下图所示： 其中半行距 = (lineHeight – fontSize) / 2。 但是实际上，—font-size经常不等于渲染的高度，如下图所示： 对于笔者用的Pro…