登录
推荐 文章 Go 技术 课程 下载 专题 AI

前端技术文章

Go教程 Go问答 MySQL Redis 软件教程 人工智能 业界新闻 php教程 java教程 python教程 linux 前端 常见问题 AI提示词 作文 画画
作为锚点。JavaScript 也可用于平滑滚动效果。代码示例：返回顶部
CSS（可选平滑">
最轻量兼容方案是<ahref="#top">配合<divid="top">，但固定导航栏会遮挡内容；需用scroll-padding-top或margin-top/padding-top负正抵消法预留偏移，或JS调用scrollTo({top:0,behavior:'smooth'})并减去导航栏高度。
401 收藏
  • 文章 · 前端   |  1个月前  |  
    CSS控制滚动条在padding外显示的技巧
    CSS控制滚动条在padding外显示的技巧
    overflow必须设置在有明确尺寸限制且内容溢出的内层盒子上才有效；外层盒子仅负责padding等留白，不设overflow，内层设height/max-height与overflow-y:auto。
    176 收藏
  • 文章 · 前端   |  1个月前  |  
    navigator.onLine 监听网络变化并触发同步
    navigator.onLine 监听网络变化并触发同步
    navigator.onLine仅提供当前网络状态快照，不能直接触发同步；正确做法是offline事件暂存任务到本地存储，online事件或页面加载时主动执行幂等同步，并需防范假在线、时效性等实际问题。
    499 收藏
  • 文章 · 前端   |  1个月前  |  
    aria-pressed的正确用法及实战示例
    aria-pressed的正确用法及实战示例
    aria-pressed用于标识按钮的“按下”状态，适用于切换行为的按钮。1.它不是描述按钮是否可点击，而是反映其当前状态，如静音或播放/暂停按钮；2.可用在原生<button>或带role="button"的元素上；3.其值为true、false或mixed，需通过JavaScript动态更新以匹配视觉状态；4.与aria-checked（复选框状态）和aria-selected（集合中选中项）不同，分别应用于不同语义场景；5.动态更新至关重要，确保屏幕阅读器能实时反馈状
    341 收藏
  • 文章 · 前端   |  1个月前  |  
    CSS单侧边框设置方法详解
    CSS单侧边框设置方法详解
    border-left没生效主要因三点：未设border-style、父容器overflow:hidden裁剪或元素为inline需改display；Retina屏模糊需用0.5px或transform缩放；flex中推荐gap+border-right替代以避免宽度计算错误。
    316 收藏
  • 文章 · 前端   |  1个月前  |  
    V8 隐藏类优化对象访问速度技巧
    V8 隐藏类优化对象访问速度技巧
    HiddenClasses是V8为相同属性结构对象动态生成的内部类型描述，决定属性访问是否启用内联缓存；结构不稳定（如delete、乱序添加、类型变更）会触发字典模式，性能降2–5倍。
    100 收藏
  • 文章 · 前端   |  1个月前  |  
    在 HTML 中，CSS 并不支持 rem() 函数用于数学运算（如取余），rem() 是一个单位函数，用于设置字体大小等样式属性。因此，无法直接通过 CSS 的 rem() 函数来计算两个值的余数并保留被除数的符号。如果你是想在 JavaScript 中实现类似功能，可以使用 % 运算符，并结合 Math.sign() 来保留被除数的符号。例如：function remainderWithSig
    在 HTML 中，CSS 并不支持 rem() 函数用于数学运算（如取余），rem() 是一个单位函数，用于设置字体大小等样式属性。因此，无法直接通过 CSS 的 rem() 函数来计算两个值的余数并保留被除数的符号。如果你是想在 JavaScript 中实现类似功能，可以使用 % 运算符，并结合 Math.sign() 来保留被除数的符号。例如：function remainderWithSig
    CSS中没有rem()函数，因为rem是长度单位而非计算函数；真正支持数值计算的只有calc()、min()、max()、clamp()，且均不支持取余运算。
    408 收藏
  • 文章 · 前端   |  1个月前  |  
    CSS Grid快速构建Tab选项卡组件方法
    CSS Grid快速构建Tab选项卡组件方法
    不能直接用grid-template-rows切换Tab内容，因其仅定义轨道而非控制显隐；应由display/visibility/inert等机制配合Grid布局实现，结构上用tab-container+tab-content分离布局与状态。
    276 收藏
  • 文章 · 前端   |  1个月前  |  
    CSS @import 引入组件样式出现延迟，主要是因为 @import 会阻塞页面渲染，导致加载变慢。解决方法包括： 1. **避免使用 @import**：直接使用 `` 标签引入 CSS 文件，性能更优。 2. **将 @import 放在底部**：尽量将 @import 放在 CSS 文件的末尾，减少对关键渲染路径的影响。 3. **使用异步加载**：通过 JavaScript 动态加载
    CSS @import 引入组件样式出现延迟，主要是因为 @import 会阻塞页面渲染，导致加载变慢。解决方法包括： 1. **避免使用 @import**：直接使用 `` 标签引入 CSS 文件，性能更优。 2. **将 @import 放在底部**：尽量将 @import 放在 CSS 文件的末尾，减少对关键渲染路径的影响。 3. **使用异步加载**：通过 JavaScript 动态加载
    根本原因是@import会阻塞后续CSS解析与渲染，属CSS规范定义的同步行为；应改用构建工具模块化引入或link并行加载。
    285 收藏
  • 文章 · 前端   |  1个月前  |  
    WebSocket消息撤回与实时列表更新教程
    WebSocket消息撤回与实时列表更新教程
    消息撤回需服务端广播message_recall类型状态变更并写入日志，前端通过msgId精准更新UI，离线用户需兜底同步，确保跨终端状态一致。
    433 收藏
  • 文章 · 前端   |  1个月前  |  
    HTML左侧抽屉弹出实现方法【代码详解】
    HTML左侧抽屉弹出实现方法【代码详解】
    最简方案是用transform:translateX(-280px)和translateX(0)配合transition实现drawer弹出，需设固定宽度、position:fixed、bodyoverflow:hidden，并通过class切换控制状态，避免直接操作style。
    417 收藏
  • 文章 · 前端   |  1个月前  |  
    JavaScript 动态控制元素可见性及响应式适配方法
    JavaScript 动态控制元素可见性及响应式适配方法
    本文讲解如何在响应式菜单中正确实现点击展开/收起功能，避免因内联样式覆盖媒体查询导致的显示异常问题。核心方案是结合事件监听与CSS类控制，而非直接操作style.display。本文讲解如何在响应式菜单中正确实现点击展开/收起功能，避免因内联样式覆盖媒体查询导致的显示异常问题。核心方案是结合事件监听与CSS类控制，而非直接操作`style.display`。在构建响应式导航菜单时，常见的需求是：大屏下默认显示全部内容，小屏下默认折叠、点击标题展
    384 收藏
  • 文章 · 前端   |  1个月前  |  
    优雅降级新标签 noscript 与 polyfill 方法
    优雅降级新标签 noscript 与 polyfill 方法
    <noscript>对新HTML标签无效，因其仅响应JS禁用而非浏览器不支持；应使用特性检测（如typeofHTMLDialogElement）配合动态降级或轻量polyfill。
    397 收藏
    • 1979899500