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

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

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

一、层叠上下文

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

那么z轴是什么呢?

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

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

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

设计模式之工厂模式:简单工厂&工厂方法&抽象工厂

背景

设计模式有3大类,分为:创建型模式结构型模式行为型模式。工厂模式属于创建型模式,创建型模式提供了一种在创建对象的同时隐藏创建逻辑的方式,而不是使用 new运算符直接实例化对象。这使得程序在判断针对某个给定实例需要创建哪些对象时更加灵活。

简单工厂

描述:定义一个类用于创建父类相同的子类对象,由传入参数决定创建哪个子类。
简单工厂
举个例子,我喜欢玩游戏。定义一个Game接口,让具体的游戏去实现这个接口
继续阅读设计模式之工厂模式:简单工厂&工厂方法&抽象工厂