设计模式 之 抽象工厂模式

女娲的失误

工厂模式中讲了女娲造人的故事。人是造出来了,世界也热闹了,可是低头一看,都是清一色的类型,缺少关爱、仇恨、喜怒哀乐等情绪,人类的生命太平淡了,女娲一想,猛然一拍脑袋,忘记给人类定义性别了,那怎么办?抹掉重来,于是人类经过一次大洗礼,所有的人种都消灭掉了,世界又是空无一物,寂静而又寂寞。

由于女娲之前的准备工作花费了非常大的精力,比如准备黄土、八卦炉等,从头开始建立所有的事物也是不可能的,那就想在现有的条件下重新造人,尽可能旧物利用嘛。人种 (

Product

产品类)应该怎么改造呢?怎么才能让人类有爱有恨呢?是神仙当然有办法了,定义互斥的性别,然后在每个个体中埋下一颗种子:异性相吸,成熟后就一定会去找个异性(这就是我们说的爱情原动力)。从设计角度来看,一个具体的对象通过两个坐标就可以确 定:肤色和性别。

设计模式 之 抽象工厂模式

产品类分析完毕了,生产的工厂类(八卦炉)该怎么改造呢?只有一个生产设备,要么生产出来的全都是男性,要么都是女性。那不行呀,这么翻天覆地的改造就是为了产生不同 性别的人类。有办法了!把目前已经有的生产设备——八卦炉拆开,于是女娲就使用了“八 卦复制术”,把原先的八卦炉一个变两个,并且略加修改,就成了女性八卦炉(只生产女性 人种)和男性八卦炉(只生产男性人种),于是乎女娲就开始准备生产了,其类图如图9-2所示。

这个类图虽然大,但是比较简单。

Java

的典型类图,一个接口,多个抽象类,然后是

N

个实现类,每个人种都是一个抽象类,性别是在各个实现类中实现的。特别需要说明的是

HumanFactory

接口,在这个接口中定义了三个方法,分别用来生产三个不同肤色的人种,也就是我们在图9-1中的

Y

坐标,它的两个实现类分别是性别,也就是图9-1中的X坐标,通过

X

坐标(性别)和

Y

坐标(肤色)唯一确定了一个生产出来的对象。我们来看看相关的实现,

Human

接口。

设计模式 之 抽象工厂模式

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 人种接口 * @author: Jacob * @create: 2020-08-18 10:57 **/public interface Human {    //每个人种都有相应的颜色    public void getColor();    //人类会说话    public void talk();    //每个人都有性别    public void getSex();}

人种有三个抽象类,负责人种的抽象属性定义:肤色和语言。白色人种、黑色人种、黄 色人种分别如代码。

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 黑色人种 * @author: Jacob * @create: 2020-08-18 11:14 **/public abstract class AbstractBlackHuman implements Human{    //黑色人种的皮肤颜色是黑色的    @Override    public void getColor() {        System.out.println("黑色人种的皮肤颜色是黑色的!");    }    //黑色人种讲话    @Override    public void talk() {        System.out.println("黑色人种会说话,一般人听不懂。");    }}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 白色人种 * @author: Jacob * @create: 2020-08-18 11:13 **/public abstract class AbstractWhiteHuman implements Human {    //白色人种的皮肤颜色是白色的    @Override    public void getColor() {        System.out.println("白色人种的皮肤颜色是白色的!");    }    //白色人种讲话    @Override    public void talk() {        System.out.println("白色人种会说话,一般说的都是单字节。");    }}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 黄色人种 * @author: Jacob * @create: 2020-08-18 11:16 **/public abstract class AbstractYellowHuman implements Human {    //黄色人种的皮肤颜色是黄色的    @Override    public void getColor() {        System.out.println("黄色人种的皮肤颜色是黄色的!");    }    //黄色人种讲话    @Override    public void talk() {        System.out.println("黄色人种会说话,一般说的都是双字节。");    }    }

每个抽象类都有两个实现类,分别实现公共的最细节、最具体的事物:肤色和语言。具 体的实现类实现肤色、性别定义。

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 黑色女性人种 * @author: Jacob * @create: 2020-08-18 11:21 **/public class FemaleBlackHuman extends AbstractBlackHuman {    @Override    public void getSex() {        System.out.println("黑色女性人种");    }}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 黑色男性人种 * @author: Jacob * @create: 2020-08-18 11:22 **/public class MaleBlackHuman extends AbstractBlackHuman{    @Override    public void getSex() {        System.out.println("黑色男性人种");    }}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 白色女性人种 * @author: Jacob * @create: 2020-08-18 11:20 **/public class FemaleWhiteHuman extends AbstractWhiteHuman{    @Override    public void getSex() {        System.out.println("白色女性人种");    }}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 白色男性人种 * @author: Jacob * @create: 2020-08-18 11:20 **/public class MaleWhiteHuman extends AbstractWhiteHuman{    @Override    public void getSex() {        System.out.println("白色男性人种");    }}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 黄色女性人种 * @author: Jacob * @create: 2020-08-18 11:17 **/public class FemaleYellowHuman extends AbstractYellowHuman {    @Override    public void getSex() {        System.out.println("黄色女性人种");    }}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 黄色男性人种 * @author: Jacob * @create: 2020-08-18 11:18 **/public class MaleYellowHuman extends AbstractYellowHuman {    @Override    public void getSex() {        System.out.println("黄色男性人种");    }}

到此为止,我们已经把真实世界的人种都定义出来了,剩下的工作就是怎么制造人类。

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 八卦炉定义 * @author: Jacob * @create: 2020-08-18 17:47 **/public interface HumanFactory {    //制造一个黄色人种    public Human createYellowHuman();    //制造一个白色人种    public Human createWhiteHuman();    //制造一个黑色人种    public Human createBlackHuman();}

在接口中,我们看到八卦炉是可以生产出不同肤色人种的(当然了,女娲的失误嘛), 那它有多少个八卦炉呢?两个,分别生产女性和男性,女性和男性八卦炉。

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 生产女性的八卦炉 * @author: Jacob * @create: 2020-08-18 17:48 **/public class FemaleFactory implements HumanFactory {    //生产出黄人女性    @Override    public Human createYellowHuman() {        return new FemaleYellowHuman();    }    //生产出白人女性    @Override    public Human createWhiteHuman() {        return new FemaleWhiteHuman();    }    //生产出黑人女性    @Override    public Human createBlackHuman() {        return new FemaleBlackHuman();    }}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 生产男性的八卦炉 * @author: Jacob * @create: 2020-08-18 17:49 **/public class MaleFactory implements HumanFactory {    //生产出黑人男性    @Override    public Human createBlackHuman() {        return new MaleBlackHuman();    }    //生产出白人男性    @Override    public Human createWhiteHuman() {        return new MaleWhiteHuman();    }    //生产出黄人男性    @Override    public Human createYellowHuman() {        return new MaleYellowHuman();    }}

人种有了,八卦炉也有了,我们就来重现一下当年女娲造人的光景。

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 女娲重造人类 * @author: Jacob * @create: 2020-08-18 17:51 **/public class NvWa {        public static void main(String[] args) {        //第一条生产线,男性生产线        HumanFactory maleHumanFactory = new MaleFactory();        //第二条生产线,女性生产线        HumanFactory femaleHumanFactory = new FemaleFactory();        //生产线建立完毕,开始生产人了:        Human femaleYellowHuman = femaleHumanFactory.createYellowHuman();        Human femaleBlackHuman = femaleHumanFactory.createBlackHuman();        Human femaleWhiteHuman = femaleHumanFactory.createWhiteHuman();        System.out.println("---生产一个黄色女性---");        femaleYellowHuman.getColor();        femaleYellowHuman.talk();        femaleYellowHuman.getSex();        System.out.println("---生产一个黑色女性---");        femaleBlackHuman.getColor();        femaleBlackHuman.talk();        femaleBlackHuman.getSex();        System.out.println("---生产一个白色女性---");        femaleWhiteHuman.getColor();        femaleWhiteHuman.talk();        femaleWhiteHuman.getSex();        Human maleYellowHuman = maleHumanFactory.createYellowHuman();        Human maleBlackHuman = maleHumanFactory.createBlackHuman();        Human maleWhiteHuman = maleHumanFactory.createWhiteHuman();        System.out.println("n---生产一个黄色男性---");        femaleWhiteHuman.getColor();        maleYellowHuman.talk();        maleYellowHuman.getSex();        System.out.println("n---生产一个黄色男性---");        maleBlackHuman.getColor();        maleBlackHuman.talk();        maleBlackHuman.getSex();        System.out.println("n---生产一个白色男性---");        maleWhiteHuman.getColor();        maleWhiteHuman.talk();        maleWhiteHuman.getSex();    }    }

代码语言:javascript代码运行次数:0运行复制

运行结果如下所示:---生产一个黄色女性---黄色人种的皮肤颜色是黄色的!黄色人种会说话,一般说的都是双字节。黄色女性人种---生产一个黑色女性---黑色人种的皮肤颜色是黑色的!黑色人种会说话,一般人听不懂。黑色女性人种---生产一个白色女性---白色人种的皮肤颜色是白色的!白色人种会说话,一般说的都是单字节。白色女性人种---生产一个黄色男性---白色人种的皮肤颜色是白色的!黄色人种会说话,一般说的都是双字节。黄色男性人种---生产一个黄色男性---黑色人种的皮肤颜色是黑色的!黑色人种会说话,一般人听不懂。黑色男性人种---生产一个白色男性---白色人种的皮肤颜色是白色的!白色人种会说话,一般说的都是单字节。白色男性人种

各种肤色的男性、女性都制造出来了,两性之间产生了相互吸引力,于是情感产生,这 个世界就多了一种小说的题材“爱情”。回头来想想我们的设计,不知道大家有没有去过工厂,每个工厂分很多车间,每个车间又分多条生产线,分别生产不同的产品,我们可以把八卦炉比喻为车间,把八卦炉生产的工艺(生产白人、黑人还是黄人)称为生产线,如此来看就是一个女性生产车间,专门生产各种肤色的女性,一个是男性生产车间,专门生产各种肤色男性,生产完毕就可以在系统外组装,什么是组装?嘿嘿,自己思考!在这样的设计下,各个车间和各条生产线的职责非常明确,在车间内各个生产出来的产品可以有耦合关系,你 要知道世界上黑、黄、白人种的比例是:

1∶4∶6

,那这就需要女娲娘娘在烧制的时候就要做好比例分配,在一个车间内协调好。这就是抽象工厂模式。

抽象工厂模式的定义

抽象工厂模式(

Abstract Factory Pattern

)是一种比较常用的模式,其定义如下:

Provide an interface for creating families of related or dependent objects without specifying their concrete classes.

(为创建一组相关或相互依赖的对象提供一个接口,而且无须指定它们的具体类。)

设计模式 之 抽象工厂模式

抽象工厂模式是工厂方法模式的升级版本,在有多个业务品种、业务分类时,通过抽象工厂模式产生需要的对象是一种非常好的解决方式。我们来看看抽象工厂的通用源代码,首先有两个互相影响的产品线(也叫做产品族),例如制造汽车的左侧门和右侧门,这两个应 该是数量相等的——两个对象之间的约束,每个型号的车门都是不一样的,这是产品等级结 构约束的,我们先看看两个产品族的类图。

北极象沉浸式AI翻译 北极象沉浸式AI翻译

免费的北极象沉浸式AI翻译 - 带您走进沉浸式AI的双语对照体验

北极象沉浸式AI翻译 0 查看详情 北极象沉浸式AI翻译

设计模式 之 抽象工厂模式

注意类图上的圈圈、框框相对应,两个抽象的产品类可以有关系,例如共同继承或实现 一个抽象类或接口。

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 抽象产品A类 * @author: Jacob * @create: 2020-08-18 17:57 **/public abstract class AbstractProductA {    //每个产品共有的方法    public void shareMethod() {        System.out.println("每个产品A共有的方法");    }    //每个产品相同方法,不同实现    public abstract void doSomething();}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 产品A1的实现类 * @author: Jacob * @create: 2020-08-18 17:58 **/public class ProductA1 extends AbstractProductA {    @Override    public void doSomething() {        System.out.println("产品A1的实现方法");    }}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 产品A1的实现类 * @author: Jacob * @create: 2020-08-18 17:58 **/public class ProductA2 extends AbstractProductA {    @Override    public void doSomething() {        System.out.println("产品A2的实现方法");    }}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 抽象产品B类 * @author: Jacob * @create: 2020-08-18 17:57 **/public abstract class AbstractProductB {    //每个产品共有的方法    public void shareMethod() {        System.out.println("每个产品B共有的方法");    }    //每个产品相同方法,不同实现    public abstract void doSomething();}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 产品B1实现类 * @author: Jacob * @create: 2020-08-18 17:58 **/public class ProductB1 extends AbstractProductB {    @Override    public void doSomething() {        System.out.println("产品B1的实现方法");    }}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 产品B2实现类 * @author: Jacob * @create: 2020-08-18 17:58 **/public class ProductB2 extends AbstractProductB {    @Override    public void doSomething() {        System.out.println("产品B2的实现方法");    }}

抽象工厂类

AbstractCreator

的职责是定义每个工厂要实现的 功能,在通用代码中,抽象工厂类定义了两个产品族的产品创建。

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 抽象工厂类 * @author: Jacob * @create: 2020-08-18 18:02 **/public abstract class AbstractCreator {    //创建A产品家族    public abstract AbstractProductA createProductA();    //创建B产品家族    public abstract AbstractProductB createProductB();}

注意:有N个产品族,在抽象工厂类中就应该有

N

个创建方法。

如何创建一个产品,则是由具体的实现类来完成的。

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 产品等级1的实现类 * @author: Jacob * @create: 2020-08-18 18:03 **/public class Creator1 extends AbstractCreator {    //只生产产品等级为1的A产品    @Override    public AbstractProductA createProductA() {        return new ProductA1();    }    //只生产产品等级为1的B产品    @Override    public AbstractProductB createProductB() {        return new ProductB1();    }}

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 产品等级1的实现类 * @author: Jacob * @create: 2020-08-18 18:03 **/public class Creator2 extends AbstractCreator {    //只生产产品等级为1的A产品    @Override    public AbstractProductA createProductA() {        return new ProductA2();    }    //只生产产品等级为1的B产品    @Override    public AbstractProductB createProductB() {        return new ProductB2();    }}

注意:有

M

个产品等级就应该有

M

个实现工厂类,在每个实现工厂中,实现不同产品族的生产任务。

在具体的业务中如何产生一个与实现无关的对象呢?

代码语言:javascript代码运行次数:0运行复制

/** * @program: DesignMode * @description: 场景类 * @author: Jacob * @create: 2020-08-18 18:08 **/public class Client {    public static void main(String[] args) {        //定义出两个工厂        AbstractCreator creator1 = new Creator1();        AbstractCreator creator2 = new Creator2();        //产生A1对象        AbstractProductA a1 = creator1.createProductA();        a1.doSomething();        a1.shareMethod();        //产生A2对象        AbstractProductA a2 = creator2.createProductA();        a2.doSomething();        a2.shareMethod();        //产生B1对象        AbstractProductB b1 = creator1.createProductB();        b1.doSomething();        b1.shareMethod();        //产生B2对象        AbstractProductB b2 = creator2.createProductB();        b2.doSomething();        b2.shareMethod();    }}

在场景类中,没有任何一个方法与实现类有关系,对于一个产品来说,我们只要知道它的工厂方法就可以直接产生一个产品对象,无须关心它的实现类。

代码语言:javascript代码运行次数:0运行复制

运行结果如下所示:产品A1的实现方法每个产品A共有的方法产品A2的实现方法每个产品A共有的方法产品B1的实现方法每个产品B共有的方法产品B2的实现方法每个产品B共有的方法

抽象工厂模式的应用抽象工厂模式的优点 封装性,每个产品的实现类不是高层模块要关心的,它要关心的是什么?是接口,是抽象,它不关心对象是如何创建出来,这由谁负责呢?工厂类,只要知道工厂类是谁,我就能创建出一个需要的对象,省时省力,优秀设计就应该如此。 产品族内的约束为非公开状态。例如生产男女比例的问题上,猜想女娲娘娘肯定有自己的打算,不能让女盛男衰,否则女性的优点不就体现不出来了吗?那在抽象工厂模式,就 应该有这样的一个约束:每生产1个女性,就同时生产出1.2个男性,这样的生产过程对调用工厂类的高层模块来说是透明的,它不需要知道这个约束,我就是要一个黄色女性产品就可以了,具体的产品族内的约束是在工厂内实现的。 抽象工厂模式的缺点

抽象工厂模式的最大缺点就是产品族扩展非常困难,为什么这么说呢?我们以通用代码 为例,如果要增加一个产品C,也就是说产品家族由原来的2个增加到3个,看看我们的程序 有多大改动吧!抽象类

AbstractCreator

要增加一个方法

createProductC()

,然后两个实现类都要修改,想想看,这严重违反了开闭原则,而且我们一直说明抽象类和接口是一个契约。改变 契约,所有与契约有关系的代码都要修,那么这段代码叫什么?叫“有毒代码”,——只要与这段代码有关系,就可能产生侵害的危险!

抽象工厂模式的使用场景

抽象工厂模式的使用场景定义非常简单:一个对象族(或是一组没有任何关系的对象)都有相同的约束,则可以使用抽象工厂模式。什么意思呢?例如一个文本编辑器和一个图片处理器,都是软件实体,但是

*nix

下的文本编辑器和

Windows

下的文本编辑器虽然功能和界 面都相同,但是代码实现是不同的,图片处理器也有类似情况。也就是具有了共同的约束条件:操作系统类型。于是我们可以使用抽象工厂模式,产生不同操作系统下的编辑器和图片处理器。

抽象工厂模式的注意事项

在抽象工厂模式的缺点中,我们提到抽象工厂模式的产品族扩展比较困难,但是一定要清楚,是产品族扩展困难,而不是产品等级。在该模式下,产品等级是非常容易扩展的,增加一个产品等级,只要增加一个工厂类负责新增加出来的产品生产任务即可。也就是说横向 扩展容易,纵向扩展困难。以人类为例子,产品等级中只有男、女两个性别,现实世界还有一种性别:双性人,既是男人也是女人(俗语就是阴阳人),那我们要扩展这个产品等级也是非常容易的,增加三个产品类,分别对应不同的肤色,然后再创建一个工厂类,专门负责不同肤色人的双性人的创建任务,完全通过扩展来实现需求的变更,从这一点上看,抽象工厂模式是符合开闭原则的。

最佳实践

一个模式在什么情况下才能够使用,是很多读者比较困惑的地方。抽象工厂模式是一个简单的模式,使用的场景非常多,大家在软件产品开发过程中,涉及不同操作系统的时候, 都可以考虑使用抽象工厂模式,例如一个应用,需要在三个不同平台(

Windows

Linux

Android

Google

发布的智能终端操作系统))上运行,你会怎么设计?分别设计三套不同的应用?非也,通过抽象工厂模式屏蔽掉操作系统对应用的影响。三个不同操作系统上的软 件功能、应用逻辑、

UI

都应该是非常类似的,唯一不同的是调用不同的工厂方法,由不同的产品类去处理与操作系统交互的信息。

学习于:《设计模式之禅》 — 秦小波

以上就是设计模式 之 抽象工厂模式的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/396945.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月6日 17:56:52
下一篇 2025年11月6日 17:57:57

相关推荐

  • CSS mask属性无法获取图片:为什么我的图片不见了?

    CSS mask属性无法获取图片 在使用CSS mask属性时,可能会遇到无法获取指定照片的情况。这个问题通常表现为: 网络面板中没有请求图片:尽管CSS代码中指定了图片地址,但网络面板中却找不到图片的请求记录。 问题原因: 此问题的可能原因是浏览器的兼容性问题。某些较旧版本的浏览器可能不支持CSS…

    2025年12月24日
    900
  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    400
  • 如何让小说网站控制台显示乱码,同时网页内容正常显示?

    如何在不影响用户界面的情况下实现控制台乱码? 当在小说网站上下载小说时,大家可能会遇到一个问题:网站上的文本在网页内正常显示,但是在控制台中却是乱码。如何实现此类操作,从而在不影响用户界面(UI)的情况下保持控制台乱码呢? 答案在于使用自定义字体。网站可以通过在服务器端配置自定义字体,并通过在客户端…

    2025年12月24日
    800
  • SASS 中的 Mixins

    mixin 是 css 预处理器提供的工具,虽然它们不是可以被理解的函数,但它们的主要用途是重用代码。 不止一次,我们需要创建多个类来执行相同的操作,但更改单个值,例如字体大小的多个类。 .fs-10 { font-size: 10px;}.fs-20 { font-size: 20px;}.fs-…

    2025年12月24日
    000
  • 如何在地图上轻松创建气泡信息框?

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 JS API 参考文…

    2025年12月24日
    400
  • 如何使用 scroll-behavior 属性实现元素scrollLeft变化时的平滑动画?

    如何实现元素scrollleft变化时的平滑动画效果? 在许多网页应用中,滚动容器的水平滚动条(scrollleft)需要频繁使用。为了让滚动动作更加自然,你希望给scrollleft的变化添加动画效果。 解决方案:scroll-behavior 属性 要实现scrollleft变化时的平滑动画效果…

    2025年12月24日
    000
  • 如何为滚动元素添加平滑过渡,使滚动条滑动时更自然流畅?

    给滚动元素平滑过渡 如何在滚动条属性(scrollleft)发生改变时为元素添加平滑的过渡效果? 解决方案:scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码: click the button to slide right!…

    2025年12月24日
    500
  • 为什么设置 `overflow: hidden` 会导致 `inline-block` 元素错位?

    overflow 导致 inline-block 元素错位解析 当多个 inline-block 元素并列排列时,可能会出现错位显示的问题。这通常是由于其中一个元素设置了 overflow 属性引起的。 问题现象 在不设置 overflow 属性时,元素按预期显示在同一水平线上: 不设置 overf…

    2025年12月24日 好文分享
    400
  • 网页使用本地字体:为什么 CSS 代码中明明指定了“荆南麦圆体”,页面却仍然显示“微软雅黑”?

    网页中使用本地字体 本文将解答如何将本地安装字体应用到网页中,避免使用 src 属性直接引入字体文件。 问题: 想要在网页上使用已安装的“荆南麦圆体”字体,但 css 代码中将其置于第一位的“font-family”属性,页面仍显示“微软雅黑”字体。 立即学习“前端免费学习笔记(深入)”; 答案: …

    2025年12月24日
    000
  • 如何选择元素个数不固定的指定类名子元素?

    灵活选择元素个数不固定的指定类名子元素 在网页布局中,有时需要选择特定类名的子元素,但这些元素的数量并不固定。例如,下面这段 html 代码中,activebar 和 item 元素的数量均不固定: *n *n 如果需要选择第一个 item元素,可以使用 css 选择器 :nth-child()。该…

    2025年12月24日
    200
  • 使用 SVG 如何实现自定义宽度、间距和半径的虚线边框?

    使用 svg 实现自定义虚线边框 如何实现一个具有自定义宽度、间距和半径的虚线边框是一个常见的前端开发问题。传统的解决方案通常涉及使用 border-image 引入切片图片,但是这种方法存在引入外部资源、性能低下的缺点。 为了避免上述问题,可以使用 svg(可缩放矢量图形)来创建纯代码实现。一种方…

    2025年12月24日
    100
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯css解决方案,让图片跟随文本高度,确保父容器的高度不会被图片影响。 解决方法 为了解决这个问题,需要将图片从文档流中脱离…

    2025年12月24日
    000
  • 为什么我的特定 DIV 在 Edge 浏览器中无法显示?

    特定 DIV 无法显示:用户代理样式表的困扰 当你在 Edge 浏览器中打开项目中的某个 div 时,却发现它无法正常显示,仔细检查样式后,发现是由用户代理样式表中的 display none 引起的。但你疑问的是,为什么会出现这样的样式表,而且只针对特定的 div? 背后的原因 用户代理样式表是由…

    2025年12月24日
    200
  • CSS元素设置em和transition后,为何载入页面无放大效果?

    css元素设置em和transition后,为何载入无放大效果 很多开发者在设置了em和transition后,却发现元素载入页面时无放大效果。本文将解答这一问题。 原问题:在视频演示中,将元素设置如下,载入页面会有放大效果。然而,在个人尝试中,并未出现该效果。这是由于macos和windows系统…

    2025年12月24日
    200
  • inline-block元素错位了,是为什么?

    inline-block元素错位背后的原因 inline-block元素是一种特殊类型的块级元素,它可以与其他元素行内排列。但是,在某些情况下,inline-block元素可能会出现错位显示的问题。 错位的原因 当inline-block元素设置了overflow:hidden属性时,它会影响元素的…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 为什么使用 inline-block 元素时会错位?

    inline-block 元素错位成因剖析 在使用 inline-block 元素时,可能会遇到它们错位显示的问题。如代码 demo 所示,当设置了 overflow 属性时,a 标签就会错位下沉,而未设置时却不会。 问题根源: overflow:hidden 属性影响了 inline-block …

    2025年12月24日
    000
  • 如何利用 CSS 选中激活标签并影响相邻元素的样式?

    如何利用 css 选中激活标签并影响相邻元素? 为了实现激活标签影响相邻元素的样式需求,可以通过 :has 选择器来实现。以下是如何具体操作: 对于激活标签相邻后的元素,可以在 css 中使用以下代码进行设置: li:has(+li.active) { border-radius: 0 0 10px…

    2025年12月24日
    100
  • 为什么我的 CSS 元素放大效果无法正常生效?

    css 设置元素放大效果的疑问解答 原提问者在尝试给元素添加 10em 字体大小和过渡效果后,未能在进入页面时看到放大效果。探究发现,原提问者将 CSS 代码直接写在页面中,导致放大效果无法触发。 解决办法如下: 将 CSS 样式写在一个单独的文件中,并使用 标签引入该样式文件。这个操作与原提问者观…

    2025年12月24日
    000
  • 如何模拟Windows 10 设置界面中的鼠标悬浮放大效果?

    win10设置界面的鼠标移动显示周边的样式(探照灯效果)的实现方式 在windows设置界面的鼠标悬浮效果中,光标周围会显示一个放大区域。在前端开发中,可以通过多种方式实现类似的效果。 使用css 使用css的transform和box-shadow属性。通过将transform: scale(1.…

    2025年12月24日
    200

发表回复

登录后才能评论
关注微信