前端技术文章
-
- Flexbox与position实现元素垂直居中方法
- Flexbox垂直居中只需父容器设display:flex并配合align-items:center，高度明确时最直接；若需兼容IE10–11，应使用Autoprefixer自动添加前缀。
- 文章 · 前端 | 4个月前 | 473浏览 收藏
-
- CSS固定定位问题排查详解
- fixed定位失效主因是父元素设置了transform、filter、opacity<1等属性，导致创建新包含块使fixed退化为absolute；需逐层检查computed值，移除或重置相关样式验证。
- 文章 · 前端 | 4个月前 | 280浏览 收藏
-
- 移动端三级联动选择器设计优化方案
- flex-grow无法直接平分宽度，因其分配的是剩余空间而非容器总宽；需设flex-basis:0（如flex:110）切断内容影响，并配合box-sizing:border-box、min-width:0及统一字体/内边距才能实现三列严格等宽。
- 文章 · 前端 | 4个月前 | 421浏览 收藏
-
- CSSpointer-events:none实战：穿透点击层技巧
- pointer-events:none可解决上层DOM遮挡下层可交互元素的点击问题，如模态遮罩、图表图例、拖拽手柄等场景，使事件穿透至底层，同时保留视觉效果；但需注意继承性、子元素需显式设auto、移动端兼容性及渲染顺序影响。
- 文章 · 前端 | 4个月前 | 330浏览 收藏
-
- CSS语义化配色与类名规范指南
- 语义配色需用业务类名（如.text-error）替代外观类名，结合CSS自定义属性和currentColor实现可维护性，同时适配高对比度模式与forced-colors媒体查询。
- 文章 · 前端 | 4个月前 | 189浏览 收藏
-
- HTML5Capture属性：移动端相机录音调用教程
- capture是布尔属性，需配合type="file"和精确accept值（如image/*）才能触发原生设备；iOSSafari要求input静态存在于DOM、用户手势直触且禁用桌面模式；Android行为不一，微信X5基本不支持；应以getUserMedia+MediaRecorder为可靠替代方案。
- 文章 · 前端 | 4个月前 | 472浏览 收藏
-
- HTML5无法播放M3U8原因及解决方法
- html5play函数不支持m3u8的根本原因是浏览器原生video标签大多不支持HLS协议，仅Safari默认支持；其本质是封装原生video元素，无内置解协议能力，直接赋值m3u8会失败。
- 文章 · 前端 | 4个月前 | 188浏览 收藏
-
- Node.js多核CPU利用方法详解
- Node.jsCluster模块通过主进程调用cluster.fork()创建多个worker进程，利用多核CPU提升并发性能；主进程（cluster.isMaster为true）仅负责fork、监听exit事件并重启worker，不启动HTTP服务，worker进程（cluster.isWorker为true）运行业务逻辑并共享同一端口，由内核通过SO_REUSEPORT实现负载均衡。
- 文章 · 前端 | 4个月前 | 340浏览 收藏
-
- Less构建模块化界面：组件拆分教程
- Less组件化需三原则：一用scope前缀隔离变量（如@card-bg-color）；二限制嵌套≤3层并禁跨组件@import；三主题切换须预编译多套CSS而非运行时改变量。
- 文章 · 前端 | 4个月前 | 360浏览 收藏
-
- HTML中使用modulepreload预加载ES模块的方法
- modulepreload是<linkrel="modulepreload">用于预获取模块而不执行，区别于<scripttype="module">的立即解析执行；它需绝对路径、as="script"，且服务端需配CORS，适用于明确依赖链或动态导入前的预加载。
- 文章 · 前端 | 4个月前 | 492浏览 收藏
-
- HTML开箱动画实现教程
- 用CSStransform+transition可实现宝箱开盖动画：盖子需设transform-origin:topcenter并绕顶部边缘旋转，父容器加transform-style:preserve-3d；用cubic-bezier(0.34,1.56,0.64,1)增强弹开感；双层box-shadow模拟高光与动态阴影；渐变背景模拟木纹反光；JS需加锁防重复触发，监听transitionend同步状态；移动端需touch-action和will-change优化性能。
- 文章 · 前端 | 4个月前 | 126浏览 收藏
-
- WeakMap安全存储DOM私有状态方法
- WeakMap能避免内存泄漏，因其键对DOM元素持弱引用，元素被移除后可被GC回收；而Map等强引用会阻止回收。应以元素为key、全局WeakMap管理状态，避免反向引用和原始值作key。
- 文章 · 前端 | 4个月前 | 180浏览 收藏
-
- 组件适配屏幕尺寸方法解析
- ResizeObserver是监听组件尺寸变化的最优方案，它直接绑定元素、精准触发回调、避免全局事件冲突，支持iframe和阴影DOM，且提供contentRect数据；相比window.resize，它能感知布局重排等细粒度变化。
- 文章 · 前端 | 4个月前 | 494浏览 收藏
-
- CSS快速切换品牌色，Root变量应用技巧
- 直接修改:root中的CSS变量值可实现全局换色，但前提是所有颜色使用处均已替换为var(--brand-color)，且无JS硬编码、内联样式或第三方库绕过；需手动替换background-color、color、border-color、box-shadow、outline-color、伪元素样式、SVG的fill/stroke、表单状态色等，同时确保变量名准确、加载顺序正确、无语法错误，并避免IE兼容性问题。
- 文章 · 前端 | 4个月前 | 307浏览 收藏
-
- CSS输入框聚焦边框不显示怎么解决
- 答案：通过使用:focus伪类设置边框颜色、去除outline并添加box-shadow，可解决表单输入框聚焦样式不明显问题。1.为input添加:focus样式以明确边框颜色；2.设置outline:none消除浏览器默认轮廓；3.使用box-shadow增强视觉反馈；4.必要时提升CSS优先级或使用!important；5.引入CSSReset或Normalize.css统一浏览器默认样式，确保兼容性与无障碍访问。
- 文章 · 前端 | 4个月前 | 155浏览 收藏
查看更多
课程推荐
-
- 前端进阶之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推荐
-
- PubMedQA
- 深入了解PubMedQA生物医学问答数据集，涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用，助力提升NLP模型性能。
- 268次使用
-
- H2O EvalGPT
- H2O EvalGPT是H2O.ai推出的开源LLM评估平台，提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能，助您快速选择最适合项目的高性能大语言模型。
- 321次使用
-
- LMArena
- LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制，用户可对比不同大模型回答并生成实时排行榜，助力开发者优化模型及用户选择最佳AI工具。
- 306次使用
-
- HELM
- 深入了解斯坦福推出的HELM（Holistic Evaluation of Language Models）大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景，涵盖准确性、公平性、鲁棒性等多维度指标，助力开发者全面优化语言模型性能。
- 282次使用
-
- MMBench
- MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台，提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景，助力开发者全面评估多模态模型性能。
- 100次使用
