-
加了cursor:move弹窗仍不动，因为该属性仅改变鼠标样式，不触发位置计算；真正实现拖拽需JavaScript监听mousedown/mousemove并动态设置style.left/style.top。
-
设计模式与架构实践提升JavaScript代码的可维护性、可扩展性和可复用性。工厂模式用于按条件创建对象，如表单验证器；单例模式确保全局唯一实例，适用于配置管理；观察者模式实现状态变化自动通知，支撑事件总线与响应式系统。模块化按功能划分业务单元，结合ES6import/export支持静态分析与tree-shaking；通过TypeScript定义接口契约，依赖抽象解耦模块。引入依赖注入便于测试，状态管理依项目规模选用Context、ReduxToolkit或Zustand。最终目标是在合理场景应用恰当模
-
getComputedTiming().duration总是Infinity或0，因为它只读取动画声明的原始时长，未显式设置duration时默认为Infinity，已结束且无fill时退化为0。
-
HTML调用navigator.mediaDevices.getUserMedia()时，权限弹窗延迟或点击“允许”后卡顿，主因是媒体流初始化（如打开摄像头、协商参数）阻塞主线程，而非权限请求本身；必须HTTPS+用户手势触发，约束宜用ideal而非min/max，停止时需先置空srcObject再stoptracks。
-
清除浏览器缓存可解决网页显示异常或加载旧版本问题，具体方法包括：一、通过浏览器设置清除所有时间范围内的缓存文件；二、使用Ctrl+F5或Command+Shift+R强制刷新页面以获取最新资源；三、在开发者工具的Network选项卡中勾选Disablecache临时禁用缓存；四、在站点设置中删除特定网站的缓存数据；五、关闭浏览器后手动删除系统级缓存目录中的文件。
-
弹性盒子与网格布局混合使用错位的根本原因是容器层级职责不清、display属性覆盖或尺寸计算冲突；应由Grid负责整体二维结构划分，Flexbox负责内部一维内容对齐，并通过语义化wrapper隔离职责、合理设置min-width和轨道函数避免拉伸干扰。
-
:focus-visible更适合表单可访问性，因为它仅在键盘导航（如Tab）时显示焦点样式，避免鼠标点击时突兀的轮廓线；需用层叠规则安全降级，并注意浏览器支持与元素默认行为差异。
-
首先配置本地站点并保存HTML文件至站点目录，接着使用实时视图快速预览页面效果，然后通过F12快捷键在默认浏览器中完整测试，最后可在首选参数中设置多个浏览器以提高兼容性调试效率。
-
box-sizing默认值为content-box导致宽高计算反直觉，即width/height仅指内容区，padding和border额外增加；设为border-box后则宽高包含padding和border，更符合设计稿的“总尺寸”预期。
-
iframe中直接append父页面link会报“insertBefore”错误，因DOM节点不能跨document复用；必须用cloneNode(true)深克隆或手动创建新link并插入iframe的head中，且仅限同源场景。
-
推荐使用SheetJS库导出：通过CDN引入xlsx.min.js，调用table_to_sheet转换表格为工作表，book_new创建工作簿，book_append_sheet添加工作表，writeFile触发下载。
-
ruby和rt必须配合rb才能正确渲染拼音，漏掉rb或结构错误会导致浏览器忽略注音或平铺显示；现代浏览器要求每个汉字用单独rb包裹，rt紧跟对应rb，多字需逐字拆分，禁用破坏流式布局的CSS。
-
grid-auto-rows:min-content不影响容器高度，只控制隐式行高度；容器需移除height/min-height等限制并避免父容器拉伸，才能真正贴合内容。
-
calc()是CSS函数，必须写在CSS声明中（如style属性或样式表），且加减号前后必须有空格；不能用于HTML属性，乘除法无空格要求但单位规则更严，嵌套实为括号，推荐用自定义属性拆分复杂计算。
-
遮罩文字不居中需确保父容器设position:relative；hover闪动应搭配transform过渡与pointer-events控制；flex/Grid下遮罩须显式设宽高；移动端需处理z-index、pointer-events及hover/active/媒体查询兼容。
