有关层叠上下文和层叠顺序的理解

有关层叠上下文和层叠顺序的理解

在网页中的内容发生层叠的时候,一定有前后的层叠顺序产生(如下),所以我们这就需要我们理解css里的层叠上下文和层叠顺序。

一、层叠上下文

层叠上下文,英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元素在z轴上有较高等级。

那么z轴是什么呢?

在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴Y轴以及表示层叠的Z轴。一般情况下,元素在页面上沿X轴Y轴平铺,我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠,这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

如果一个元素含有层叠上下文,(也就是说它是层叠上下文元素),我们可以理解为这个元素在Z轴上就“高人一等”,最终表现就是它离屏幕观察者更近。

换句话说,页面中的元素有了层叠上下文,就等同于网页中元素级别更高,离我们用户更近了。
继续阅读有关层叠上下文和层叠顺序的理解

Vue生命周期

前言

文章是对整个Vue生命周期,以及在不同生命周期的过程中所发生的一些过程,以及一些简单的原理。涉及响应式,依赖收集,template编译,patch机制,diff算法。当然本篇文章只是简单梳理了一下过程,每一个部分并没有详细介绍,因为每一个部分的实现都是一个篇幅很长的东西。而且下面整理的很乱,估计只有我自己能看懂吧,后面有时间会重新整理一遍发上来。

继续阅读Vue生命周期

JS异步编程

前言

文中将简单整理一下js异步编程的方法。关于js异步编程,早期很容易出现回调地狱这一现象,也出现了一些相应的解决办法,从PromiseGenerator再到async/await,解决了回调地狱这一问题,当然本文只是浅显的举出一些实例,以及个人简单的理解。

异步编程这一块确实还有很多可以继续深入的地方。

继续阅读JS异步编程

内联元素的一些探究

前言

本文依然是对《CSS世界》这本书中的一些知识点进行探究和实践。内联元素在CSS中极为重要,块级元素负责结构,内联元素负责内容,而CSS又是为图文展示而设计,因此显得尤为重要。同时多个属性混合在一起共同作用又会产生较为复杂的结果,比较典型的就是line-heightvertical-align,以及“幽灵空白”(CSS文档中叫strut)产生的一些现象了。

文中也将从这三个方面去入手,实践一些现象产生的原因。

继续阅读内联元素的一些探究