自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(27)
  • 收藏
  • 关注

原创 VS Code 工作区(Workspace)详解

独立配置:在文件中,你可以针对特定的 Workspace 设置不同的,不会影响全局或用户级别的 VS Code 配置。示例:在不同的 Workspace 里设置不同的缩进风格、代码格式化工具、Python 解释器等。单个项目:直接打开文件夹即可。多个相关项目:使用 Workspace 管理,保存文件。需要自定义 VS Code 配置:Workspace 提供更细粒度的控制。

2025-03-13 17:52:21 1387

原创 JavaScript 包管理工具对比:pnpm、yarn 和 npm

简介:npm 是 Node.js 的默认包管理工具,最早由 Isaac Z. Schlueter 开发。特点开箱即用,Node.js 自带。生态最大,几乎所有 Node.js 项目都支持 npm。npm 7+ 支持 Monorepo 工作空间。

2025-03-10 20:41:12 265

原创 实现随页面滚动而出现的动画效果

在现代网页设计中,滚动动画是一种非常流行的交互方式,能够增强用户体验并提升页面的视觉吸引力。通过 CSS 动画和 属性,我们可以轻松实现组件(如图片、文本等)在页面滚动时逐渐出现的动画效果。本文将详细介绍如何实现这一效果。使用 定义组件从隐藏到显示的动画效果。例如,组件从透明和缩小状态逐渐变为不透明和正常大小。2.2 应用动画将动画应用到组件上,并设置动画的持续时间和触发时机。:将 动画应用到组件上,动画速度为线性。:将动画与页面滚动绑定。:定义动画的触发范围::当组件进入视口时开始动

2025-02-24 11:07:33 1311

原创 解决 HTML 中文本换行符不生效的问题

方法说明保留空白符和换行符,并在必要时换行。保留换行符,但合并多余的空格。替换为<br>标签将换行符替换为<br>标签,强制换行。使用<pre>标签完全保留文本格式(包括空格和换行符)。

2025-02-24 10:53:26 406

原创 使用 container-type 和 cqi 单位实现响应式文本

特性说明示例值定义容器类型,用于容器查询sizecqi单位容器内联大小的百分比19cqiclamp()函数设置值的范围,确保在最小值和最大值之间。

2025-02-22 15:36:23 400

原创 CSS 容器查询(Container Queries)详解

属性作用示例值定义容器类型,用于容器查询size为容器指定名称,用于@container规则sidebarcontainer和的简写形式@container定义根据容器大小应用的样式。

2025-02-22 15:33:06 289

原创 CSS Flexbox 和 Grid 布局的使用与区别

特性FlexboxGrid维度一维布局(行或列)二维布局(行和列)适用场景小规模布局大规模布局对齐方式和和项目大小flex-growflex-basis项目位置由 HTML 结构决定可以任意放置。

2025-02-22 09:57:00 933

原创 CSS 选择器优先级详解

选择器类型优先级示例内联样式ID 选择器#header类选择器.nav属性选择器伪类:hover元素选择器div伪元素::before。

2025-02-22 09:49:56 358

原创 Flexbox 布局中的 flex-grow、flex-shrink、flex-basis 和 flex 属性详解

属性作用默认值示例值flex-grow定义项目的扩展比例012定义项目的收缩比例101flex-basis定义项目的初始大小auto200px50%flex简写形式,定义flex-grow和flex-basis0 1 auto11 1 autonone。

2025-02-22 09:05:18 984

原创 CSS 伪类函数 :where() 详解

特性:where():is()优先级优先级总是为 0优先级由选择器列表中优先级最高的选择器决定可容错支持可容错选择器解析支持可容错选择器解析使用场景简化选择器、降低优先级、容错处理简化选择器、保持优先级。

2025-02-21 17:12:15 428

原创 ESLint 配置文件 “.eslintrc.json“ 详解

配置项作用示例env定义代码运行的环境extends继承和扩展现有的 ESLint 配置globals声明全局变量parser指定自定义的解析器配置解析器的选项plugins使用的插件列表"react"rules定义具体的规则settings为插件提供的共享设置。

2025-02-20 10:37:02 1061

原创 JavaScript 箭头函数中的占位符 “_“ 详解

用法说明忽略当前元素的值,仅使用索引i进行计算。作为占位符表示当前元素的值在函数体内不会被使用,避免代码检查工具的警告。适用场景生成序列数组、遍历数组时忽略元素值、映射数组时仅使用索引等。

2025-02-20 08:48:36 241

原创 NPM 使用指南:代理配置

代理配置命令示例说明查看配置查看当前 NPM 配置设置代理设置 HTTP/HTTPS 代理禁用 SSL 检查在自签名证书环境下禁用 SSL 严格模式。

2025-02-19 23:04:40 721

原创 NPM 使用指南:全局安装、本地安装

安装类型命令示例使用场景全局安装安装命令行工具,全局可用本地安装项目内部使用的包开发依赖仅在开发环境中需要的包生产依赖在生产环境中需要的包。

2025-02-19 22:54:31 484

原创 CSS 中可继承的属性与不可继承的属性

类别属性示例继承行为可继承的属性colortext-align子元素默认继承父元素的值不可继承的属性widthheightmarginpadding子元素必须显式设置属性值控制继承的关键字inheritinitialunsetrevert强制继承、恢复初始值或默认值。

2025-02-19 20:39:20 369

原创 .textContent、.innerText 和 .innerHTML 的区别

属性返回值内容是否受 CSS 影响是否包含 HTML 标签是否保留换行符纯文本,忽略 HTML 标签否否是.innerText可见文本,受 CSS 影响是否是.innerHTML包含 HTML 标签的完整内容否是是。

2025-02-19 18:20:51 366

原创 自定义 VS Code 界面颜色:修改 Explorer 背景颜色及其他设置

通过修改活动栏、标题栏、状态栏的背景和文字颜色。编辑器和文件资源管理器中的缩进线颜色。

2025-02-19 17:12:12 528

原创 在 Web 开发中使用 SVG 图标的 7 种方法

方法优势限制内联 SVG高度可定制,支持 CSS 样式和交互代码量较大,复杂页面中多次使用时冗余<img>标签简单易用,适合静态图标无法直接通过 CSS 修改图标样式<object>标签支持交互,保留内部结构,可以用 JS 操控使用较复杂,兼容性较差适合背景图标,代码简洁无法修改图标的颜色和形状SVG 图标字体(如 Font Awesome)易于使用,响应式,统一管理多个图标只能控制大小和颜色,修改图标较麻烦<use>元素可以重用 SVG 图标,灵活控制样式。

2025-02-19 15:23:44 1156

原创 Server Actions 原理分析:简化前后端交互的机制

框架实现方式特点Next.jsAPI 路由 + Server Actions直接调用服务端函数,简化请求管理Remixaction函数自动映射表单提交到服务端逻辑Nuxt.js通过中间件处理请求和响应Server Actions 通过封装 HTTP 请求的细节,使开发者能够以更直观的方式处理前后端交互。无论是 Next.js、Remix 还是 Nuxt.js,它们都提供了类似的机制来简化开发流程。通过理解这些机制,开发者可以更高效地构建现代 Web 应用。

2025-02-16 16:58:01 840

原创 Node.js 数据流读取:深入理解 ‘data‘ 和 ‘end‘ 事件

事件/选项描述应用场景'data'事件在每次数据块到达时触发,用于逐块处理数据文件上传、网络请求、数据流处理'end'事件在数据传输完成后触发,用于执行清理操作或完成处理逻辑文件上传完成、请求处理完成控制缓冲区大小,影响'data'事件的触发频率和数据块大小优化数据传输速率和内存使用。

2025-02-16 16:42:50 408

原创 高阶函数的常见应用场景与实现

高阶函数是 JavaScript 中非常强大的工具,它们可以接收函数作为参数,或者返回一个函数。本文将介绍几种常见的高阶函数应用场景,包括柯里化、反柯里化、函数节流、分时函数和惰性加载函数,并提供具体的实现代码。柯里化是一种将多参数函数转换为一系列单参数函数的技术。它的核心思想是部分求值,即函数在接收参数时不会立即计算,而是累积参数,直到需要计算结果时才一次性计算。应用场景:参数分步传递,延迟计算。复用部分参数,生成新的函数。2. 反柯里化(Uncurrying)反柯里化是将只能应用于特定对

2025-02-16 16:33:44 329

原创 安装 NVM 时的常见问题及解决方案

在自定义 Node.js 安装路径时,可能会遇到nvm use命令无法正确设置当前版本的问题。在自定义 Node.js 全局模块的安装路径时,需要将路径添加到系统环境变量中,否则全局模块可能无法正常使用。问题描述解决方案Node.js 安装路径被自动删除安装 NVM 后再设置路径,并修改文件夹权限NVM 命令在 PowerShell 中无法识别修改 PowerShell 执行策略为自定义路径后无法设置 Node.js 版本检查路径设置,重新安装 Node.js,并验证版本设置全局模块无法使用。

2025-02-16 16:26:00 983

原创 如何修改已提交的 Git Commit:完整指南

情况方法适用场景注意事项尚未推送到远程仓库修改最近一次提交的提交信息仅适用于未推送的提交已经推送到远程仓库修改已推送的提交信息强制推送可能影响团队协作,需谨慎使用添加额外说明而不修改提交信息创建新的提交补充说明但不修改历史提交适合团队协作,避免强制推送。

2025-02-16 16:16:47 896

原创 如何找到连续子数组的最大和:Kadane 算法详解

Kadane 算法是一种简洁高效的解决方案,适合大多数场景。动态规划提供了更直观的状态转移思路,适合需要记录中间结果的场景。

2025-02-16 16:01:43 298

原创 快速找到两个自然数之间的所有素数:埃拉托斯特尼筛法详解

埃拉托斯特尼筛法(简称埃氏筛)是一种用于查找素数的经典算法。它的基本思想是从小到大遍历所有自然数,依次筛去每个素数的倍数,剩下的未被筛去的数就是素数。

2025-02-16 15:27:17 395

原创 深入理解 CSS 中的 `transform-origin` 和变换顺序

决定了变换的基准点,且在整个变换过程中保持不变。变换的顺序会直接影响最终效果,因为每个变换都会改变元素的坐标系。

2025-02-16 14:48:47 255

原创 将 VS Code 终端设置为始终以管理员权限打开

找到VS Code 程序图标,右键选择属性。在兼容性一栏,勾选以管理员身份运行此程序。 之后重启VS Code即可

2021-12-24 22:50:33 5590

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除