-
z-index不生效的常见原因包括元素未定位、层叠上下文限制及z-index值相同。1.元素必须设置position为relative、absolute、fixed或sticky，否则z-index无效；2.不同层叠上下文中的元素，其堆叠顺序由各自上下文在父级中的层级决定，子级z-index再高也无法突破父级上下文；3.同一层叠上下文中z-index相同则后渲染的元素覆盖前者。排查时应检查元素是否定位、查看祖先元素是否创建了层叠上下文（如opacity小于1、transform、filter等属性），并逐
-
应复用同一Audio实例并在用户首次交互时预播放以解锁权限，用布尔变量控制开关状态，封装triggerCelebration函数解耦业务逻辑，按钮同步aria-pressed与audio.muted，iOS需预热播放或降级WebAudioAPI。
-
应使用background-imageCSS属性而非过时的bodybackground属性；正确写法包括指定url、background-size、background-repeat和background-position，避免简写导致意外重置，并通过开发者工具调试路径与加载问题。
-
JavaScript任务调度依赖事件循环机制，通过setTimeout、setInterval、requestAnimationFrame、WebWorkers及自定义队列等手段控制任务执行。事件循环管理宏任务（如setTimeout）与微任务（如Promise）的执行顺序，确保异步操作按规则运行。宏任务在每次循环中取一个执行，期间清空微任务队列，导致即使延迟为0的setTimeout也会滞后于同步代码和微任务。为实现并发控制，可构建TaskQueue类，限制同时运行的任务数量，避免资源过载。该类通过维护
-
Vue3中defineProps的TypeScript严格类型声明需用泛型替代运行时配置，推荐interface或内联类型配合withDefaults；函数、对象、数组须显式标注类型，避免any。
-
应使用transformtranslateY实现滚动容器内元素跟随，而非position:fixed或top；需监听容器scroll事件，动态设置translateY偏移，确保父容器无干扰transform/perspective/filter，且避免重排卡顿。
-
counter-increment用于增加CSS计数器值，常配合::before或::after与content实现自动编号；通过counter-reset初始化计数器，可设初始值，默认每次加1，也可指定增量，支持多个计数器同时操作，结合嵌套结构实现多级编号如1.1、1.2等，适用于标题、列表等序号生成，提升文档结构化与维护性。
-
alpha通道是控制颜色透明度的参数，0为完全透明，1为不透明；在rgba()或hsla()中第四个值即alpha，影响元素与背景的颜色混合效果，常用于实现半透明遮罩、背景融合等视觉设计。
-
flex-direction:column-reverse将子元素按从下到上顺序排列，视觉垂直翻转；需配合display:flex和足够高度使用，影响焦点顺序、屏幕阅读器及伪类匹配，适用于聊天消息等倒序场景。
-
transition与color结合可实现颜色平滑渐变，常用于按钮悬停、主题切换等场景。通过设置transition:color0.3sease等语法，使文字、背景、边框等颜色变化更自然。需明确初始颜色，避免使用transition:all，以提升性能和效果稳定性。
-
Canvas是HTML5位图绘图API，核心在于控制2D上下文路径操作：获取上下文、设置样式、定义路径、调用fill/stroke渲染；动画需requestAnimationFrame循环清屏重绘。
-
浏览器缓存策略决定JavaScript脚本是否重复加载，从而影响执行次数；强缓存或协商缓存下脚本只执行一次，缓存失效则导致重复初始化、事件重复绑定等异常。
-
auto-fill会创建尽可能多的轨道并保留空白，auto-fit则只创建有内容的轨道并拉伸填满空间。例如容器宽500px、最小列宽100px时，auto-fill始终生成5个轨道（空位保留），而auto-fit仅生成实际需要的列数并扩展占满剩余空间，实现紧凑布局。区别在于是否保留空白轨道。
-
深拷贝创建完全独立的新对象，所有嵌套层级均复制；浅拷贝仅复制第一层，嵌套对象仍共享引用。关键区别在于修改副本是否影响原对象：浅拷贝下顶层属性互不影响，但嵌套对象修改会同步；深拷贝则彻底隔离。
-
JavaScript模板字符串使用反引号包裹，通过${}插入变量或表达式，支持多行文本和标签模板，适用于动态生成HTML、构造URL等场景，提升代码可读性与安全性。
