前端技术文章

  • CSS弹性垂直滚动列表实现技巧
    CSS弹性垂直滚动列表实现技巧
    flex:1为什么在垂直滚动容器里不生效因为flex:1本质是缩写flex:110,它依赖父容器有明确高度才能“撑开”子项;而如果父容器高度未设(比如只靠内容撑开),flex:1就没参考系,自然不收缩也不拉伸,更不会触发滚动。常见错误现象:overflow-y:auto完全没反应,列表内容直接溢出容器下方必须确保父容器有固定/可计算的高度:比如设height:100vh、max-height:500px,或父级是display:flex;flex-direction
    文章 · 前端   |  5个月前  |   496浏览 收藏
  • CSS列表悬停效果怎么实现
    CSS列表悬停效果怎么实现
    答案:通过CSS:hover伪类实现列表项悬停效果。首先构建无序列表结构,利用li:hover设置背景色、文字颜色变化,并添加transition使过渡更平滑;可扩展边框、阴影、缩放等视觉效果,结合类名精确控制样式,推荐使用cursor:pointer提示交互性,提升整体用户体验。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • Angular 自定义指令结合 ngClass 使用方法
    Angular 自定义指令结合 ngClass 使用方法
    Angular的结构指令(如*someDirective)不能直接参与属性绑定表达式(如ngClass),因其本质是语法糖,会被编译为ngTemplateOutlet和嵌入式视图操作,无法返回布尔值供模板逻辑使用;正确方案是将共享逻辑提取至服务,并通过服务+管道或服务+指令协同实现条件控制。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • Startup首页图片对齐技巧分享
    Startup首页图片对齐技巧分享
    StartupBlog主题首页图片不居中是因.startup-blog-featured-image类未设居中样式,需在Customizer中添加.startup-blog-featured-imageimg{display:block;margin:0auto;}并检查父容器浮动、尺寸及Elementor响应设置。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • html5play分段播放技巧详解
    html5play分段播放技巧详解
    HTMLMediaElement.play()是原生方法,不存在html5play函数;分段播放需手动控制currentTime、pause()、play()及timeupdate事件,用区间判断替代精确时间点以避免失效。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • Vue数组变异方法与数据更新失效解决办法
    Vue数组变异方法与数据更新失效解决办法
    Vue.js数组响应式失效主因是直接索引赋值或改length;需用7个变异方法(push/pop/shift/unshift/splice/sort/reverse)或$set/splice替代;Vue3虽用Proxy增强支持,仍建议优先使用变异方法。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • JavaScript中yield在异步迭代中的暂停作用
    JavaScript中yield在异步迭代中的暂停作用
    yield本身不处理异步,仅暂停生成器并交出控制权;真正实现异步暂停的是yield后接Promise并配合await或手动next()调度;asyncfunction*使yield可等待Promisesettle后再产出值。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • CSS Grid实现Masonry布局及dense优化技巧
    CSS Grid实现Masonry布局及dense优化技巧
    不能。grid-auto-flow:dense仅按DOM顺序填空,不支持跨行高度自适应,无法实现真Masonry;column-count+break-inside:avoid是目前最稳定纯CSS替代方案。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • 微服务中JavaScript API设计技巧
    微服务中JavaScript API设计技巧
    微服务下JavaScriptAPI设计需兼顾独立性与前端友好性。1.采用RESTful风格,用名词表示资源如/users,通过HTTP方法定义操作,统一返回结构含data、success、message;2.引入BFF或APIGateway聚合数据,减少前端多请求负担,提升性能;3.耗时任务使用异步模式,返回202状态码及任务ID,前端轮询或WebSocket监听结果;4.用Swagger定义接口并生成TypeScript类型,确保前后端契约一致,提升协作效率与系统稳定性。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • JavaScript可选链操作符详解教程
    JavaScript可选链操作符详解教程
    可选链操作符?.是用于安全访问深层嵌套属性、可能为空的对象方法及数组索引的语法,遇null/undefined即返回undefined;??则用于null/undefined时的默认值兜底,二者职责分明且常组合使用。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • CSS图片中心剪裁定位技巧
    CSS图片中心剪裁定位技巧
    background-position:center仅控制背景图定位点对齐容器中心,不控制缩放与裁剪;需配合background-size:cover才能实现居中剪裁,且裁剪区域受图片与容器宽高比影响。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • CSS定位元素溢出处理技巧
    CSS定位元素溢出处理技巧
    overflow:hidden不能裁剪position:absolute元素,因其仅对既是定位上下文又是新层叠上下文的祖先生效;若最近定位祖先未设overflow:hidden或不存在,则裁剪失效。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • CSS按钮状态过渡不自然?用transition实现平滑背景与颜色切换
    CSS按钮状态过渡不自然?用transition实现平滑背景与颜色切换
    按钮状态切换不自然的主因是未在默认状态中定义transition,导致进出动画不一致;应显式声明需过渡的属性、统一各交互态的过渡参数,并排查样式覆盖与属性兼容性问题。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • flex-wrap:wrap与justify-content实现多列布局
    flex-wrap:wrap与justify-content实现多列布局
    flex-wrap:wrap未换行主因是父容器宽度过大或未设宽,致子项可单行排列;需设width/max-width、检查flex-shrink及white-space;justify-content仅作用于当前行内对齐。
    文章 · 前端   |  6个月前  |   496浏览 收藏
  • subpixel-antialiasing字体优化设置建议
    subpixel-antialiasing字体优化设置建议
    Chrome中font-smoothing无效是因-webkit-font-smoothing仅macOS有效,Windows/Linux下被静默忽略;应优先使用font-optical-sizing:auto等标准属性,而非依赖私有平滑控制。
    文章 · 前端   |  6个月前  |   496浏览 收藏
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
  • Golang深入理解GPM模型
    Golang深入理解GPM模型
    Golang深入理解GPM调度器模型及全场景分析,希望您看完这套视频有所收获;包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
    474次学习
查看更多
AI推荐
  • PubMedQA数据集详解:生物医学问答基准、功能与应用指南
    PubMedQA
    深入了解PubMedQA生物医学问答数据集,涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用,助力提升NLP模型性能。
    510次使用
  • H2O EvalGPT:开源LLM大模型评估与排行榜工具
    H2O EvalGPT
    H2O EvalGPT是H2O.ai推出的开源LLM评估平台,提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能,助您快速选择最适合项目的高性能大语言模型。
    570次使用
  • LMArena是什么?伯克利AI模型评估平台使用指南与功能解析
    LMArena
    LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制,用户可对比不同大模型回答并生成实时排行榜,助力开发者优化模型及用户选择最佳AI工具。
    595次使用
  • 斯坦福HELM:大语言模型Holistic Evaluation整体评估框架详解
    HELM
    深入了解斯坦福推出的HELM(Holistic Evaluation of Language Models)大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景,涵盖准确性、公平性、鲁棒性等多维度指标,助力开发者全面优化语言模型性能。
    547次使用
  • MMBench详解:多模态大模型基准测试、功能特点与使用指南
    MMBench
    MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台,提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景,助力开发者全面评估多模态模型性能。
    364次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码