前端技术文章
-
- CSS动态边框动画：变量控制dasharray偏移
- 边框描边动画本质是控制虚线显示节奏：stroke-dasharray设路径总长，stroke-dashoffset控制起始位置；需用getTotalLength()或JS动态计算周长，响应式下须监听resize重算；CSS变量可驱动stroke-dashoffset动画（Chrome110+/Firefox112+支持transition），但@keyframes中var(--offset)无效；SVG推荐显式path而非rect，避免圆角导致dash跳变；Safari性能差时宜改用mask+backgr
- 文章 · 前端 | 4个月前 | 472浏览 收藏
-
- CSS美化表单的5个实用技巧
- 通过统一字体、优化输入框反馈、美化按钮和布局间距，可显著提升表单的美观性与用户体验。1.设置表单元素继承字体并规范基础样式；2.利用:focus增强输入焦点视觉反馈；3.自定义提交按钮样式并添加悬停效果；4.合理使用标签间距与flex布局实现清晰结构。保持整体风格一致即可让表单更专业。
- 文章 · 前端 | 4个月前 | 472浏览 收藏
-
- CommonJS模块加载与性能优化要点
- CommonJS模块在Node.js中同步加载，即阻塞式文件读取与立即执行，虽提升调试直观性但导致冷启动慢、缓存失效风险及循环依赖隐患；可通过延迟加载、合并小模块、预加载等优化规避瓶颈。
- 文章 · 前端 | 4个月前 | 472浏览 收藏
-
- HTML锚点定位怎么实现？详解方法！
- 锚点跳转失效主因是id与href匹配细节或DOM状态异常：id须全局唯一且不以数字开头；href需为合法hash格式；目标元素须已渲染且可见；可用scrollIntoView()替代或监听hashchange手动滚动，并用scroll-margin-top解决吸顶遮挡。
- 文章 · 前端 | 4个月前 | 472浏览 收藏
-
- CSS选择第一个子元素的方法有多种，具体取决于你的HTML结构和需求。以下是几种常见的方法：✅1.使用:first-child选择器.parent>:first-child{/*样式*/}说明：>:first-child会选择.parent的第一个直接子元素。注意：这个选择器只针对直接子元素（不包括嵌套的子元素）。✅2.使用:nth-child(1)选择器.parent>:nth
- :first-child选中父元素第一个子元素且类型必须匹配，而:first-of-type选中父元素下首个指定类型元素；二者功能不同，:first-child等价于:nth-child(1)。
- 文章 · 前端 | 4个月前 | 472浏览 收藏
-
- Flex布局打造响应式栅格系统教程
- flex-basis是初始主轴尺寸而非width，受flex-grow/shrink影响；设flex:00200px才锁死宽度，百分比需父容器有width，响应式推荐min-width+flex-wrap+flex:11auto。
- 文章 · 前端 | 4个月前 | 472浏览 收藏
-
- JavaScriptreduce用法与实战场景
- reduce是JavaScript数组将元素累积为单一值的方法，通过callback（含累计值acc和当前项cur）和可选initialValue实现；常用于聚合计算、结构转换、分组等，需注意初始值类型匹配与必返值。
- 文章 · 前端 | 4个月前 | 472浏览 收藏
-
- JavaScript代码压缩技巧与教程详解
- JavaScript代码压缩必须基于AST工具如terser，不可用正则粗暴删空格，否则会破坏语法结构、触发ASI错误或暴露源码隐患；正确做法是通过Webpack/Vite等构建工具集成terser，并谨慎配置mangling与sourcemap。
- 文章 · 前端 | 4个月前 | 472浏览 收藏
-
- HTML5视频背景设置方法详解
- 可用video标签配合CSS实现背景效果：需加autoplay、muted、loop属性，设position:fixed/absolute与z-index:-1，用object-fit:cover铺满且保持宽高比，并设poster避免空白。
- 文章 · 前端 | 4个月前 | 472浏览 收藏
-
- Vue 中 VNode 类型有哪些？文本注释组件渲染差异详解
- Vue中VNode核心类型有五种：文本节点、注释节点、元素节点、组件节点、函数式组件节点；文本节点仅含text属性，挂载时创建Text节点，更新时仅修改nodeValue；注释节点isComment为true，挂载和更新均只操作nodeValue且跳过diff；组件节点封装实例与上下文，挂载时创建实例并递归patch子树，更新时复用或重建实例。
- 文章 · 前端 | 4个月前 | 472浏览 收藏
-
- JavaScript Proxy拦截对象操作教程
- Proxy仅拦截明确的语言级操作（如get/set/deleteProperty），无法捕获Date/RegExp等内置对象的内部槽访问，且JSON.stringify、Object.assign等不触发trap；set返回false在严格模式下静默失败，throw则抛错；数组length变更不触发deleteProperty。
- 文章 · 前端 | 5个月前 | 472浏览 收藏
-
- 自定义响应式逻辑，实现搜索框防抖技巧
- customRef更适合防抖是因为它能手动控制track和trigger时机：输入时只track不trigger，防抖结束才trigger更新，避免中间值触发响应式副作用。
- 文章 · 前端 | 5个月前 | 472浏览 收藏
-
- CSS处理长英文不换行撑爆问题的常用方法包括使用 word-break、overflow-wrap 或 white-space 属性。以下是几种常见解决方案及对应的优化标题建议：常见解决方法使用 word-break: break-all; 允许在单词内断行，适用于中英文混排或长英文单词。.container { word-break: break-all; }使用 overflow-wrap
- 长英文不换行导致容器溢出时，应同时设置overflow-wrap:break-word和word-break:break-all，并配合max-width或width限制容器宽度，表格需table-layout:fixed，Flex项需flex-shrink:1和min-width:0。
- 文章 · 前端 | 5个月前 | 472浏览 收藏
-
- CSS元素过渡效果全解析
- CSS通过transition属性实现元素平滑过渡，需设置property、duration、timing-function和delay四个参数，常用触发方式包括:hover、:focus及JavaScript操作，仅数值和颜色类属性支持动画。
- 文章 · 前端 | 5个月前 | CSS 过渡效果 472浏览 收藏
-
- Nuxt3环境变量Docker配置详解
- 本文详解如何在Nuxt3（Vue3）应用中，通过Docker构建阶段正确传递和使用环境变量（如NUXT_ENV_N_API），解决runtimeConfig.public在构建时无法读取process.env的常见问题。
- 文章 · 前端 | 5个月前 | 472浏览 收藏
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 485次学习
-
- Golang深入理解GPM模型
- Golang深入理解GPM调度器模型及全场景分析，希望您看完这套视频有所收获；包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
- 474次学习
查看更多
AI推荐
-
- SuperCLUE
- SuperCLUE是权威的中文大语言模型综合评测基准，涵盖语言理解、知识应用、AI Agent智能体及安全性等12项核心能力。通过多轮对话与客观测试，定期发布榜单与技术报告，为模型研发、优化及行业选型提供科学依据。
- 108次使用
-
- C-Eval
- 深入了解C-Eval中文评估套件，涵盖52个学科与4级难度。本文详解其功能特点、Zero-shot/Few-shot使用方法及代码示例，助您全面评测LLM中文理解与泛化能力。
- 27次使用
-
- Gradio
- Gradio是一个用于构建机器学习和数据科学Web应用的开源Python库。支持快速创建交互界面，获Google、Meta等大厂青睐，适合模型演示、部署反馈及调试。
- 105次使用
-
- AutoGPT
- AutoGPT是基于GPT-4的开源AI代理平台，拥有超10万GitHub星标。本文介绍其低代码界面、自动化工作流功能、系统配置要求及安装步骤，助您高效部署和管理AI Agent。
- 110次使用
-
- Dataify
- Dataify是专注AI生态的一站式数据服务平台，整合全球住宅代理、多源数据采集API及高质量训练数据集。支持LLM训练、跨境电商及金融分析，解决数据孤岛难题，助力企业智能化转型。
- 11次使用
