上一次，我写了一篇《Data URL的简介与使用》，该文章主要介绍了什么是Data URL，其优缺点及可以如何使用。其中有一个隐含在文中的重要概念，那就是Data URL是Base64编码的，且Base64编码的数据体积通常是原数据的体积4/3。
不知道大家会不会有这样的疑问：
如果你对此也有疑问的话，就往下一看究竟吧。
大家可能不一定都用过CSS自定义属性（ CSS Custom Properties ），但是一定都用过预处理器中的变量。这也是CSS自定义属性有时候被称作CSS变量的原因。
但由于预处理器中变量的使用位置可以不局限在属性值，但是自定义属性只能作为属性值使用，所以其准确名称是CSS自定义属性，而不是CSS变量。
下面我们先从预处理器说起。
CSS中有两个很常见的概念，伪类和伪元素。
伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。
伪元素会创建一个抽象的伪元素，这个元素不是DOM中的真实元素，但是会存在于最终的渲染树中，我们可以为其添加样式。
最常规的区分伪类和伪元素的方法是：实现伪类的效果可以通过添加类来实现，但是想要实现伪元素的等价效果只能创建实际的DOM节点。
此外，伪类是使用单冒号:，伪元素使用是双冒号::。
伪元素可以分为排版伪元素、突出显示伪元素、树中伪元素三类。下面我们一起看看具体都有哪些吧。
本文主要介绍CSS Pseudo-Elements Module Level 4涉及的伪元素，因为该标准仍处于草案阶段，所以会存在变动的可能。本文旨在带大家了解有哪些现在以及将来可用的伪类。有兴趣的可以持续跟进。
提起，z-index大家脑海里可能会立刻浮现这样的知识点：“z-index的值大小控制元素在Z轴上显示的层级，z-index越大显示的层级越高（也就是在最上层，离观察者越近），没有指定的按照出现顺序堆叠，此外z-index不能跨父元素比较。
z-index的使用似乎就是这么简单，对吧？
我们先看如下例1：
1 | <div class="box box1">DIV#1，z-index为2</div> |
HTML中有如下两个元素，DIV#1的z-index为2，DIV#2向右向上偏移。问：它们谁会显示在上面？
点击 CSS的“层”峦“叠”翠 - 示例1 - 用法导引 进行编辑 (@verymuch) on CodePen.
如上所示，z-index为2的元素并没有显示在第二个元素上面。这似乎很奇怪，那到底是为什么呢？
如果你也对此存在困扰，那就和我一起往下看吧。笔者将逐步引导大家深入理解z-index的用法。
ES6中引入了模块（Modules）的概念，相信大家都已经挺熟悉的了，在日常的工作中应该也都有使用。
本文会简单介绍一下ES模块的优点、基本用法以及常见问题。
着重介绍3个使用ES模块的常见问题：