-
雪碧图background-position需以元素左上角为原点，垂直堆叠时第二图标为0-16px；内联style限首屏小样式（≤1KB），禁用normalize等大文件；base64临界值建议设4096；preload必须加as="style"。
-
在ReactQuery中，应将动态参数（如token）作为hook的依赖项传入，而非通过refetch二次传参；需结合状态管理与enabled选项控制查询时机，确保参数存在时才发起请求。
-
移动端:active失效主因是浏览器未触发该状态，常见于缺失viewport声明、touchstart中误用preventDefault()、事件流被中断或样式继承不稳定；需结合JS状态管理增强反馈。
-
优酷收藏夹视频强制使用HTML5播放器且无法关闭，因自2021年起已全量下线Flash；可通过浏览器设置禁用自动播放，或排查网络、插件、MSE兼容性等问题解决加载异常。
-
HSL色相值需按色相环角度规范使用，推荐30°/45°/60°等分步长取值，辅色优先±30°或±60°；饱和度与明度须随色相联动调整，暖色降s提l，冷色可提s控l，中性色低s高l；CSS变量+calc()实现动态推演，注意色域差异与浏览器兼容性。
-
登录页面采用HTML表单与CSS美化，结构清晰。通过Flexbox实现居中布局，表单包含用户名密码输入框、登录按钮及辅助链接，使用响应式设计适配不同屏幕，输入框和按钮添加悬停与聚焦效果，整体简洁美观且用户体验良好。
-
float布局塌陷指父容器因子元素浮动而高度坍缩为0，导致背景/边框消失、后续元素上移；clearfix通过伪元素+clear:both强制撑高父容器，但现代推荐用flex或grid替代。
-
HTML5<inputtype="date">输出的字符串格式是ISO8601标准的"YYYY-MM-DD"（如"2024-03-15"），固定10位、无时间、无时区，为纯字符串而非Date对象，可直接用于JSON。
-
text-decoration-skip-ink无效果是因为仅在纯文本且text-decoration:underline时生效，遇inline-block、background或vertical-align等会失效；建议优先使用text-underline-offset。
-
使用linear-gradient可创建现代按钮背景渐变。首先掌握语法：background:linear-gradient(方向,起始色,结束色)；接着为按钮添加类并设置渐变样式，如从左到右的橙粉色渐变；再通过:hover伪类实现悬停颜色切换，并用transition使过渡更平滑；最后注意文字颜色对比以保证可读性，尝试不同配色提升视觉效果。
-
掌握WebGL渲染流程需先获取canvas上下文，编写GLSL着色器，编译链接程序，传入顶点数据，调用绘制函数执行渲染；每帧清空画布、设置MVP矩阵、绑定资源并绘制，构成渲染循环。3D场景依赖模型、视图、投影变换，通过perspective和lookAt模拟摄像机，片元着色器计算光照提升真实感。动画依靠requestAnimationFrame驱动，逐帧更新物体状态如旋转角度，结合deltaTime保证时间一致性。尽管原生WebGL有助于理解图形管线，但实际开发推荐Three.js等高级库，可大幅简化场景
-
直接用setTimeout返回值无法可靠取消任务，因为定时器ID是数字且函数执行完即丢失；若在异步回调中取消，ID已不可访问，而全局声明会导致多个任务互相覆盖；闭包可天然绑定每次调用的独立状态，使cancel函数与timeoutId共享词法环境，确保状态隔离、取消及时、引用干净。
-
伪元素气泡定位需父容器设position:relative，::after用content+top/right/margin精确定位右上角；三角箭头用border组合实现并加translateZ(0)防模糊；overflow:hidden时需JS提级至body或改父级overflow；触屏需JS监听touch事件；气泡设pointer-events:none但内部交互元素恢复auto。
-
使用OAuth2.0+PKCE实现前端安全授权，首先生成codeverifier和challenge，再重定向至第三方登录页，用户授权后回调获取code，最后用code和verifier换取accesstoken并调用API，建议由后端完成token交换以提升安全性。
-
本文详解如何在Tampermonkey用户脚本中，通过合理作用域管理与异步等待机制，使getElementById().value获取的动态值能在按钮点击事件（如sendEmail）中正确使用，避免因执行时机导致的undefined问题。
