base64原理浅析

前言

上一次,我写了一篇《Data URL的简介与使用》,该文章主要介绍了什么是Data URL,其优缺点及可以如何使用。其中有一个隐含在文中的重要概念,那就是Data URL是Base64编码的,且Base64编码的数据体积通常是原数据的体积4/3。

不知道大家会不会有这样的疑问:

  1. 为什么图片转成Base64编码,就可以直接内联到HTML中显示呢?
  2. 为什么Base64编码后,体积会增大1/3呢?

如果你对此也有疑问的话,就往下一看究竟吧。

查看更多

分享到 评论

CSS自定义属性及其用法

大家可能不一定都用过CSS自定义属性( CSS Custom Properties ),但是一定都用过预处理器中的变量。这也是CSS自定义属性有时候被称作CSS变量的原因。

但由于预处理器中变量的使用位置可以不局限在属性值,但是自定义属性只能作为属性值使用,所以其准确名称是CSS自定义属性,而不是CSS变量。

下面我们先从预处理器说起。

查看更多

分享到 评论

细数CSS伪元素及其用法

引言

CSS中有两个很常见的概念,伪类和伪元素。

伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。

伪元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,但是会存在于最终的渲染树中,我们可以为其添加样式。

最常规的区分伪类和伪元素的方法是:实现伪类的效果可以通过添加类来实现,但是想要实现伪元素的等价效果只能创建实际的DOM节点。

此外,伪类是使用单冒号:,伪元素使用是双冒号::

伪元素可以分为排版伪元素、突出显示伪元素、树中伪元素三类。下面我们一起看看具体都有哪些吧。

本文主要介绍CSS Pseudo-Elements Module Level 4涉及的伪元素,因为该标准仍处于草案阶段,所以会存在变动的可能。本文旨在带大家了解有哪些现在以及将来可用的伪类。有兴趣的可以持续跟进。

查看更多

分享到 评论

CSS的“层”峦“叠”翠

前言

提起,z-index大家脑海里可能会立刻浮现这样的知识点:“z-index的值大小控制元素在Z轴上显示的层级,z-index越大显示的层级越高(也就是在最上层,离观察者越近),没有指定的按照出现顺序堆叠,此外z-index不能跨父元素比较。

z-index的使用似乎就是这么简单,对吧?

我们先看如下例1:

1
2
<div class="box box1">DIV#1,z-index为2</div>
<div class="box box2">DIV#2,z-index为auto</div>

HTML中有如下两个元素,DIV#1的z-index为2,DIV#2向右向上偏移。问:它们谁会显示在上面?

示例1 - 用法引导

点击 CSS的“层”峦“叠”翠 - 示例1 - 用法导引 进行编辑 (@verymuch) on CodePen.

如上所示,z-index为2的元素并没有显示在第二个元素上面。这似乎很奇怪,那到底是为什么呢?

如果你也对此存在困扰,那就和我一起往下看吧。笔者将逐步引导大家深入理解z-index的用法。

查看更多

分享到 评论

ES模块基础用法及常见使用问题

ES6中引入了模块(Modules)的概念,相信大家都已经挺熟悉的了,在日常的工作中应该也都有使用。

本文会简单介绍一下ES模块的优点、基本用法以及常见问题。

着重介绍3个使用ES模块的常见问题:

  1. 如何在浏览器中下快速使用export/import?
  2. 如何在Node下快速使用export/import?
  3. 当心,不要修改export输出的对象,尽管你能改

查看更多

分享到 评论