-
必须设置draggable="true"才能触发原生拖拽事件；dragstart中需用dataTransfer.setData()写入数据；drop前必须在dragover中调用preventDefault()；推荐用transform:translate定位便签以提升性能。
-
本文讲解为何HTML中直接使用FontAwesome的Unicode（如）无法显示图标，并提供添加UTF-8编码声明这一关键解决方案，同时说明字体加载机制与实际应用注意事项。
-
IE10必须用display:-ms-flexbox替代display:flex，且需配套-ms-flex-pack、-ms-flex-align等旧属性；flex缩写无效，须拆解为-ms-flex-positive/-negative/-preferred-size；兜底推荐display:table。
-
HTML本身不提供Base64编解码能力，必须依赖JavaScript的atob()/btoa()或FileReader；btoa()仅支持ASCII字符串，遇中文、emoji等会报InvalidCharacterError，正确做法是先用TextEncoder转Uint8Array再处理；嵌入图片时需严格匹配data:mime-type;base64,格式，确保MIME类型准确、无换行空格。
-
inline-block元素间空隙源于HTML换行被解析为空格字符，导致约4px间隙；解决法是父容器font-size:0后子元素重设字号，兼顾兼容性与可维护性。
-
<p>移动端元素宽度被padding撑破应设box-sizing:border-box，使width包含padding和border；根选择器统一重置*{box-sizing:border-box;}，flex子项需加min-width:0并避免width:100%，padding优先用rem单位，第三方组件需用高权重选择器覆盖。</p>
-
通过局域网本地服务器实现iPhone实时预览与热重载，无需反复上传到线上托管，大幅提升Three.jsAR项目的开发调试效率。
-
event.detail不可靠地支持三击及以上连击，仅适用于桌面鼠标单/双击场景；应手动实现时间窗口计数器以确保跨平台一致性与可控性。
-
应优先用子选择器（>）而非后代选择器（空格），避免深层嵌套导致的样式污染；过长链式选择器建议改用语义类名，配合CSS自定义属性实现主题色统一管理。
-
justify-content:space-between在flex-direction:column下失效，因需父容器有明确高度（如min-height）；卡片内底部对齐应使用margin-top:auto或grid-template-rows:auto1frauto；IE11中推荐降级为margin-top:auto。
-
Tailwind不支持empty:变体，因其未内置结构伪类解析；需用@layercomponents自定义或兄弟元素+:emptyCSS实现，注意DOM空白节点和框架渲染导致的失灵问题。
-
String.prototype.slice()是纯函数式方法，不修改原字符串而返回新字符串，支持正负索引定位，结合indexOf()/lastIndexOf()可安全裁剪路径，且原始路径始终不变。
-
纯CSS下拉菜单需严格嵌套：子<ul>必须是父<li>的直接子元素，消除间隙并用position:absolute+top:100%定位；移动端需JS降级，且必须补全aria属性与键盘导航支持。
-
动态路由中基于ID的数据预取核心是页面挂载前发起请求，主流方式为路由守卫（如beforeEach）或setup中useRoute配合异步组件；需校验ID、错误跳转404、AbortController取消请求、服务端预取需同构，避免盲目预取。
-
关键在于闭包是否意外延长本该即死对象的寿命，尤其当注册为事件监听器、缓存在长生命周期对象中或捕获大尺寸上下文时；需结合GC日志、内存分配追踪与堆快照差异定位高危闭包。
