前言
上一次,我写了一篇《Data URL的简介与使用》,该文章主要介绍了什么是Data URL,其优缺点及可以如何使用。其中有一个隐含在文中的重要概念,那就是Data URL是Base64编码的,且Base64编码的数据体积通常是原数据的体积4/3。
不知道大家会不会有这样的疑问:
- 为什么图片转成Base64编码,就可以直接内联到HTML中显示呢?
- 为什么Base64编码后,体积会增大1/3呢?
如果你对此也有疑问的话,就往下一看究竟吧。
上一次,我写了一篇《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模块的常见问题: