原来飞桨还可以这么玩!当人工智能邂逅蓝桥杯算法题,会擦出怎样的火花?

本文以蓝桥杯的Fibonacci数列、大等于n的最小完全平方数为例,用飞桨解决问题。先阐述神经网络原理,从简单神经元到多层网络,再说明其工作机制。接着分别对两道题生成数据、构建模型、优化器和损失函数,经训练和验证,模型能近似拟合结果,展示了用机器学习解决算法题的思路。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

原来飞桨还可以这么玩!当人工智能邂逅蓝桥杯算法题,会擦出怎样的火花? - 创想鸟

当人工智能邂逅蓝桥杯算法题,会擦出怎样的火花?

假如人工智能也玩起了蓝桥杯算法题… …

目前,蓝桥杯上几乎所有算法题都是每个输入都有唯一确定的输出,对于一些输入输出是线性关系的题目,利用机器学习可以做一个对应的拟合,从而根据拟合出来的模型得到最终结果。

本文会以蓝桥杯的2道算法题(Fibonacci数列、大等于n的最小完全平方数)为例,尝试使用飞桨解决上面这两道算法题。

一、实现原理

虽然都说神经网络是个大黑盒,但是,其实这个黑盒并不是那么黑。

一个神经元就相当于一个函数,最简单的神经网络只有一个神经元神经网络是由许许多多的神经元搭建起来的,也就是说一个能拟合任意函数的函数拟合器其实是由许许多多的函数搭建起来的

是不是有点像傅里叶级数?(傅里叶发现任何周期函数都可以用正弦函数和余弦函数构成的无穷级数来表示)

1.从最简单的神经网路开始

在学习机器学习的过程中,大家对神经网络应该都有一个基本概念:神经网络就像一个函数拟合器,它可以拟合任意函数。

举个例子,输入一个数,输出它的相反数,那么这个函数就是正比例函数,且它的比例系数为-1,我们试着构造一个刚刚描述的神经网络:

In [ ]

def NeuralNetwork(inputs, weight): # 定义神经网络    prediction = inputs * weight   # 将数据与权重相乘    return predictioninputs = 2  # 输入数据,可随意更换weight = -1 # 权重pred = NeuralNetwork(inputs, weight) # 前向传播,即获得预测结果print(pred)

       

-2

       

刚刚我们完成的就是前向传播的过程,也就是一个预测的过程 。

预测其实就是神经网络对输入数据进行“思考”后得到的结果,更复杂的例子有:基于昨天的天气预测今天的天气

2.神经网络工作原理概述

上面的那个神经网络将输入乘以权重,将输入数据“缩放”一定的比例。神经网络的交互其实很简单:
       

它接受输入变量,并以此作为信息来源它拥有权重变量,以此作为知识融合信息和知识,输出预测结果

目前为止,所有的神经网络都是这样工作的,它使用权重中的知识解释输入数据中的信息。

看到这里,你心中也许会有疑惑,为什么可以把权重当作知识?

另一种理解神经网络权重值的方法,是将权重作为网络的输入和预测之间敏感度的度量:
       

如果权重非常高,那么即使最小的输入也可以对预测结果产生非常大的影响;如果权重很小,那么就算是很大的输入也只能对预测结果产生很小的扰动。

3.使用多个输入进行预测

在实际场景中,如果能给神经网络提供的信息越多,那么神经网络应该能做出更准确的预测。

事实上,一个网络也可以同时接受多个输入数据点。就像下面这个例子:
       

根据当前的温度、湿度、风速预测一段时间后的天气情况In [ ]

weights = [0.012, 0.3, 0.25] #温度、湿度、风速的权重inputs = [26, 0.75, 1.2] #温度、湿度、风速数据def PredSum(inputs, weights):    assert(len(inputs) == len(weights))    output = 0    for item in range(len(inputs)):        output += inputs[item] * weights[item] #将输入分别乘以其对应的权重    return outputdef NeuralNetwork(inputs, weights):    pred = PredSum(inputs, weights)    return predpred = NeuralNetwork(inputs, weights)print(pred) #一段时间后发生某事的概率,如下雨的概率

       

0.837

       

这种新的神经网络可以同时接受多个输入并作出预测。这使得网络能够结合多种形式的信息,做出更明智的决定。但是它使用权重的基本机制并没有改变。

这里带来的新特性是,因为有多个输入,所以要把他们各自的预测结果合在一起。因此,将每个输入乘以其各自的权重,然后对所有局部预测结果进行求和,这称为输入的加权和。

不过,像上面这样的代码虽然一次就可以处理多个输入,但是还是显得太麻烦了,因此,我们需要用到新工具:Numpy

对于创建向量和执行常见函数(如点积运算)来说,它的代码效率很高,下面是利用Numpy实现相同功能的代码:

In [ ]

import numpy as npweights = np.array([0.012, 0.3, 0.25])inputs = np.array([26, 0.75, 1.2])def NeuralNetwork(inputs, weights):    pred = inputs.dot(weights)    return predpred = NeuralNetwork(inputs, weights)print(pred)

       

0.837

       

4.只用一个输入做出多个输出

多输出可能是比多输入更简单的拓展。如果是3个输出,则预测过程与三个单一权重的独立神经网络是一样的。需要注意的是,这3个预测结果完全独立。

假设我们在一场球赛上,想通过某个球队的胜负记录预测球员的心情(是高兴还是悲伤)、下一场比赛的结果以及队员的受伤比例,来看看这个例子怎么做:

In [ ]

import numpy as npweights = np.array([0.3, 0.2, 0.9])inputs = 0.65def NeuralNetwork(inputs, weights):    pred = inputs * weights    return predpred = NeuralNetwork(inputs, weights)# print(pred)print("受伤比例预测:{}".format(pred[0]))print("比赛胜负预测:{}".format(pred[1]))print("悲伤程度预测:{}".format(pred[2]))

       

受伤比例预测:0.195比赛胜负预测:0.13悲伤程度预测:0.5850000000000001

       

5.基于多个输入得到多个输出

基于给定的多个输入,神经网络预测得到多个输出。

假设我们在一场球赛上,想通过某个球队的胜负记录、粉丝数和球员数量来预测球员的心情(是高兴还是悲伤)、下一场比赛的结果以及队员的受伤比例,来看看这个例子怎么做:

In [ ]

import numpy as np#从左到右分别是:[是否受伤, 是否胜利, 是否难过]weights = np.array([[0.02, 0.01, 0.05],    #胜负记录                    [0.001, 0.025, 0.04],  #粉丝数量                    [0.013, 0.03, 0.001]]) #球员数量inputs = np.array([0.65, 12.0, 8.0])       #分别是该球队的胜负记录、粉丝数量、球员数量def NeuralNetwork(inputs, weights):    pred = inputs.dot(weights)    return predpred = NeuralNetwork(inputs, weights)# print(pred)print("受伤比例预测:{}".format(pred[0]))print("比赛胜负预测:{}".format(pred[1]))print("悲伤程度预测:{}".format(pred[2]))

       

受伤比例预测:0.129比赛胜负预测:0.5465悲伤程度预测:0.5205

       

分析一下上面这个例子,这个神经网络对输入数据执行了3次独立的加权和操作,产生了3个预测结果。其实就是简单的矩阵运算,横行乘竖列再相加。

6.用预测结果进一步预测

神经网络是可以堆叠的!可以将一个网络的输出提供给另一个网路作为输入。这相当于两个连续的向量矩阵乘法。

这样做的原因是:在处理复杂问题时,对于单一权重矩阵来说过于复杂(即参数的数量不够)。

还是上面的例子:在一场球赛上,想通过某个球队的胜负记录、粉丝数和球员数量来预测球员的心情(是高兴还是悲伤)、下一场比赛的结果以及队员的受伤比例:

In [ ]

import numpy as np#从左到右分别是:[是否受伤, 是否胜利, 是否难过]InputHiddent = np.array([[0.2, 0.01, 0.05],      #隐藏层第一个单元                        [0.01, 0.025, 0.04],     #隐藏层第二个单元                        [0.13, 0.03, 0.001]])    #隐藏层第三个单元#从左到右分别是:隐藏层第一个单元到第三个单元的权重HiddentPrediction = np.array([[0.02, 0.1, 0.5],  #胜负记录                            [0.01, 0.25, 0.04],  #粉丝数量                            [0.013, 0.3, 0.01]]) #球员数量weights = [InputHiddent, HiddentPrediction]      #存放权重值,[输入到隐藏层的权重, 隐藏层到输出的权重]inputs = np.array([0.65, 12.0, 8.0])             #分别是该球队的胜负记录、粉丝数量、球员数量def NeuralNetwork(inputs, weights):    hid = inputs.dot(weights[0]) #计算隐藏层的输出    pred = hid.dot(weights[1])   #将上一层(隐藏层)的输出带入下一层的输入    return predpred = NeuralNetwork(inputs, weights)# print(pred)print("受伤比例预测:{}".format(pred[0]))print("比赛胜负预测:{}".format(pred[1]))print("悲伤程度预测:{}".format(pred[2]))

       

受伤比例预测:0.0380315比赛胜负预测:0.421775悲伤程度预测:0.672065

       

二、拟合斐波那契数列

Fibonacci数列是蓝桥杯试题入门训练的题目,算是一道入门的题目,我们尝试让神经网络试试看,看看能不能解决这道题

1.问题描述

斐波那契数列的递推公式为:Fn=Fn−1+Fn−2Fn=Fn−1+Fn−2,其中F1=F2=1F1=F2=1。

当n比较大时,FnFn也非常大,现在我们想知道,FnFn除以10007的余数是多少。

输入格式

输入包含一个整数n。

输出格式

输出一行,包含一个整数,表示FnFn除以10007的余数。

2.生成数据

数据几乎是所有模型的关键,它决定着模型的天花板。

这里我们用到的是numpy里生成随机数的函数:

numpy.random.randint(low, high=None, size=None, dtype='l')

       

函数的作用是,返回一个随机整型数,范围从低(包括)到高(不包括),即[low,high)[low,high)。如果没有写参数high的值,则返回[0,low)的值。

参数如下:

low: int
生成的数值最低要大于等于low。 (hign = None时,生成的数值要在[0,low)[0,low)区间内)

high: int (可选)
如果使用这个值,则生成的数值在[low, high)区间。

size: int or tuple of ints(可选)
输出随机数的尺寸,比如size = (m * n* k)则输出同规模即m * n* k个随机数。默认是None的,仅仅返回满足要求的单一随机数。

dtype: dtype(可选)
想要输出的格式。如int64、int等等

输出:

out: int or ndarray of ints
返回一个随机数或随机数数组

输入数据

In [48]

# 生成输入数据import numpynum_inputs=1num_examples=10features = numpy.random.randint(1, 10, (num_examples, num_inputs)) # 生成含有10个1~10的元素的二维列表

   In [ ]

print(features[:,0])

   

数据对应的标签

In [1]

def Fibonacci(n): # 求斐波契那数列的函数,输入n,输出第n项对应的值    F = [1, 1]    if n <= 2:        for item in range(n):            F.append(F[item] + F[item + 1])        return F[n - 1]%10007    else:        for item in range(n - 2):            result = (F[0] + F[1]) % 10007 # 计算出下一项后直接取余数,不影响结果             F[0], F[1] = F[1], result        return result # 直接输出余数,不需要再除10007

   In [3]

# 输出斐波那契数列的前9项for item in range(1, 10):    print(Fibonacci(item), end=" ")

       

1 1 2 3 5 8 13 21 34

       In [49]

# 生成输入对应的标签labels = []for item in features[:,0].tolist():    labels.append(Fibonacci(item))labels = numpy.expand_dims(labels, axis=-1) #注意:需要在最后增加一个维度

   In [ ]

print(labels[:,0])

   

将数组转换成张量

In [50]

# 将数据转换成tensorimport paddlefeatures = features.astype('float32')labels = labels.astype('float32')train_datas = paddle.to_tensor(features)y_true = paddle.to_tensor(labels)

   

3.构建线性回归模型

飞桨框架2.0中,组网相关的API都在paddle.nn目录下,你可以通过 Sequential 或 SubClass 的方式构建具体的模型。

这里我们使用最简单的线性变换层组网:

class paddle.nn.Linear(in_features, out_features, weight_attr=None, bias_attr=None, name=None)

       

参数:

in_features (int) – 线性变换层输入单元的数目。out_features (int) – 线性变换层输出单元的数目。weight_attr (ParamAttr, 可选) – 指定权重参数的属性。默认值为None,表示使用默认的权重参数属性,将权重参数初始化为0。具体用法请参见 ParamAttr 。bias_attr (ParamAttr|bool, 可选) – 指定偏置参数的属性。 bias_attr 为bool类型且设置为False时,表示不会为该层添加偏置。 bias_attr 如果设置为True或者None,则表示使用默认的偏置参数属性,将偏置参数初始化为0。具体用法请参见 ParamAttr 。默认值为None。name (str,可选) – 具体用法请参见 Name ,一般无需设置,默认值为None。In [59]

import paddleclass Regressor(paddle.nn.Layer):    def __init__(self):        super(Regressor, self).__init__()        self.fc1 = paddle.nn.Linear(1, 2) # 输入数据的维度是1,所以in_features必须为1        self.fc2 = paddle.nn.Linear(2, 2) # 上一层的输出维度是2,所以in_features必须为2        self.fc3 = paddle.nn.Linear(2, 1) # 根据题目,输出斐波那契数列数列第n项的值,因此输出维度为1    def forward(self, inputs):        inputs = self.fc1(inputs)        hiddent = self.fc2(inputs)        pred = self.fc3(hiddent)        return predmodel = Regressor()

   

4.构建优化器和损失函数

最优化问题是计算数学中最为重要的研究方向之一。在深度学习领域,优化算法同样是关键环节之一。即使完全相同的数据集与模型架构,不同的优化算法也很可能导致不同的训练结果,甚至有的模型出现不收敛现象。

训练的过程包含以下几点:

数据集加载网络搭建优化器设置学习率调整(可选)

度下降是目前神经网络中使用最为广泛的优化算法之一。为弥补基本梯度下降的种种缺陷,研究者们提出了一系列的变种算法,从最初的SGD逐步演变到Adam、RMSprop等。

这里我们使用的是Adam算法:

In [60]

# 定义Adam优化器lr = paddle.optimizer.lr.CosineAnnealingDecay(learning_rate=0.5, T_max=50)optimizer = paddle.optimizer.Adam(learning_rate=lr,                                     parameters=model.parameters(),                                     weight_decay=paddle.regularizer.L2Decay(0.0001))mse_loss = paddle.nn.MSELoss() # 计算预测值和目标值的均方差误差

   

5.模型训练

模型训练主要有下面几个步骤:

前向传播计算误差反向传播更新参数梯度清零In [65]

for i in range(1000): # 训练100轮    y_predict = model(train_datas) # 前向传播得到预测结果    loss = mse_loss(y_predict, y_true) # 计算预测结果与期望值的差距    loss.backward() # 根据损失进行反向传播    optimizer.step() # 更新参数    optimizer.clear_grad() # 梯度清零print(loss.numpy())

       

[3.0985627]

       

6.模型验证

斐波那契数列的前9项:

n 1 2 3 4 5 6 7 8 9

F(n)112358132134In [66]

infer_features = numpy.random.randint(1, 10, (1, 1)).astype('float32') # 随机生成一个数据infer_features = paddle.to_tensor(infer_features)fetch_list = model(infer_features) # 前向传播

   In [68]

print(infer_features)print(fetch_list)

       

Tensor(shape=[1, 1], dtype=float32, place=CUDAPlace(0), stop_gradient=True,       [[6.]])Tensor(shape=[1, 1], dtype=float32, place=CUDAPlace(0), stop_gradient=False,       [[9.02307510]])

       

斐波那契数列的第6项是8,模型的预测输出是9.02,取整就是9,虽然不是很准确,但是结果接近。

三、大等于n的最小完全平方数

大等于n的最小完全平方数是蓝桥杯试题算法训练里的练习题,难度比斐波那契数列要难一些,我们用飞桨来解这一题,过程跟上一题类似。

1.问题描述

输出大等于n的最小的完全平方数。

若一个数能表示成某个自然数的平方的形式,则称这个数为完全平方数

Tips:注意数据范围

输入格式

一个整数n

输出格式

大等于n的最小的完全平方数

样例输入

71711

       样例输出

71824

   

2.生成数据

数据生成的方法跟上一题类似,关于numpy.random模块还有很多用法,可以尝试使用该模块生成更多的数据。

In [144]

# 生成输入数据import numpynum_inputs=1num_examples=10features = numpy.random.randint(1, 10, (num_examples, num_inputs))

   In [5]

import mathdef PerfectSquare(n): # 求最小完全平方数的方法    result = 0    if n >= 0:        result = n ** 0.5        result = math.ceil(result)        result = result ** 2    return result

   In [6]

# 输出1~10的最小完全平方数for item in range(1, 10):    print(PerfectSquare(item), end=" ")

       

1 4 4 4 9 9 9 9 9

       In [145]

# 生成输入对应的标签labels = []for item in features[:,0].tolist():    labels.append(PerfectSquare(item))labels = numpy.expand_dims(labels, axis=-1) #注意:需要在最后增加一个维度

   In [146]

# 将数据转换成tensorimport paddlefeatures = features.astype('float32')labels = labels.astype('float32')train_datas = paddle.to_tensor(features)y_true = paddle.to_tensor(labels)

   

3.构建线性回归模型

飞桨框架2.0中,组网相关的API都在paddle.nn目录下,你可以通过 Sequential 或 SubClass 的方式构建具体的模型。

这里我们使用最简单的线性变换层组网:

class paddle.nn.Linear(in_features, out_features, weight_attr=None, bias_attr=None, name=None)

       

参数:

in_features (int) – 线性变换层输入单元的数目。out_features (int) – 线性变换层输出单元的数目。weight_attr (ParamAttr, 可选) – 指定权重参数的属性。默认值为None,表示使用默认的权重参数属性,将权重参数初始化为0。具体用法请参见 ParamAttr 。bias_attr (ParamAttr|bool, 可选) – 指定偏置参数的属性。 bias_attr 为bool类型且设置为False时,表示不会为该层添加偏置。 bias_attr 如果设置为True或者None,则表示使用默认的偏置参数属性,将偏置参数初始化为0。具体用法请参见 ParamAttr 。默认值为None。name (str,可选) – 具体用法请参见 Name ,一般无需设置,默认值为None。In [147]

import paddlemodel = paddle.nn.Linear(in_features=1, out_features=1) # 使用最简单的线性变换层

   

4.构建优化器和损失函数

最优化问题是计算数学中最为重要的研究方向之一。在深度学习领域,优化算法同样是关键环节之一。即使完全相同的数据集与模型架构,不同的优化算法也很可能导致不同的训练结果,甚至有的模型出现不收敛现象。

训练的过程包含以下几点:

数据集加载网络搭建优化器设置学习率调整(可选)

度下降是目前神经网络中使用最为广泛的优化算法之一。为弥补基本梯度下降的种种缺陷,研究者们提出了一系列的变种算法,从最初的SGD逐步演变到Adam、RMSprop等。

这里我们使用的是Adam算法:

In [148]

# 定义Momentum优化器lr = paddle.optimizer.lr.CosineAnnealingDecay(learning_rate=0.25, T_max=100)optimizer = paddle.optimizer.Adam(learning_rate=lr,                                     parameters=model.parameters(),                                     weight_decay=paddle.regularizer.L2Decay(0.0002))mse_loss = paddle.nn.MSELoss() # 计算预测值和目标值的均方差误差

   

5.模型训练

模型训练主要有下面几个步骤:

前向传播计算误差反向传播更新参数梯度清零In [149]

for i in range(100):    y_predict = model(train_datas)    loss = mse_loss(y_predict, y_true)    loss.backward()    optimizer.step()    optimizer.clear_grad()print(loss.numpy())

       

[0.77032995]

       

6.模型验证

In [155]

infer_features = numpy.random.randint(1, 10, (1, 1)).astype('float32')infer_features = paddle.to_tensor(infer_features)fetch_list = model(infer_features)

   In [156]

print(infer_features)print(fetch_list)

       

Tensor(shape=[1, 1], dtype=float32, place=CUDAPlace(0), stop_gradient=True,       [[6.]])Tensor(shape=[1, 1], dtype=float32, place=CUDAPlace(0), stop_gradient=False,       [[8.56781006]])

       

6的最小完全平方数是9,模型的输出是8.56,比较接近9,但是还有点差距,不过总的来说,是可以近似拟合的。

以上就是原来飞桨还可以这么玩!当人工智能邂逅蓝桥杯算法题,会擦出怎样的火花?的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月11日 12:29:48
下一篇 2025年11月11日 12:58:18

相关推荐

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

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

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

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

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

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

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

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 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
  • 旋转长方形后,如何计算其相对于画布左上角的轴距?

    绘制长方形并旋转,计算旋转后轴距 在拥有 1920×1080 画布中,放置一个宽高为 200×20 的长方形,其坐标位于 (100, 100)。当以任意角度旋转长方形时,如何计算它相对于画布左上角的 x、y 轴距? 以下代码提供了一个计算旋转后长方形轴距的解决方案: const x = 200;co…

    2025年12月24日
    000
  • 旋转长方形后,如何计算它与画布左上角的xy轴距?

    旋转后长方形在画布上的xy轴距计算 在画布中添加一个长方形,并将其旋转任意角度,如何计算旋转后的长方形与画布左上角之间的xy轴距? 问题分解: 要计算旋转后长方形的xy轴距,需要考虑旋转对长方形宽高和位置的影响。首先,旋转会改变长方形的长和宽,其次,旋转会改变长方形的中心点位置。 求解方法: 计算旋…

    2025年12月24日
    000
  • 旋转长方形后如何计算其在画布上的轴距?

    旋转长方形后计算轴距 假设长方形的宽、高分别为 200 和 20,初始坐标为 (100, 100),我们将它旋转一个任意角度。根据旋转矩阵公式,旋转后的新坐标 (x’, y’) 可以通过以下公式计算: x’ = x * cos(θ) – y * sin(θ)y’ = x * …

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

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

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

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

    2025年12月24日
    200
  • 如何计算旋转后长方形在画布上的轴距?

    旋转后长方形与画布轴距计算 在给定的画布中,有一个长方形,在随机旋转一定角度后,如何计算其在画布上的轴距,即距离左上角的距离? 以下提供一种计算长方形相对于画布左上角的新轴距的方法: const x = 200; // 初始 x 坐标const y = 90; // 初始 y 坐标const w =…

    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

发表回复

登录后才能评论
关注微信