-
theme_color是PWA启动时浏览器UI栏的提示色，仅manifest.json定义生效（优先级高于meta），AndroidChrome/Edge/Samsung支持，iOSSafari完全忽略，不作用于普通网页标签页。
-
z-index无效是因为它只在层叠上下文中生效，而非全局比较；父元素若触发层叠上下文（如opacity<1、transform非none等），子元素z-index仅在其内部起作用，无法越级覆盖外部元素。
-
crypto.randomUUID()符合安全规范，因其底层调用操作系统加密随机源（如/dev/urandom），生成RFC4122v4UUID，122位真随机，碰撞概率低于1/2¹²²，且需运行在HTTPS/localhost安全上下文。
-
移动端1px边框发虚变粗的根本原因是设备像素比（dpr）导致CSS1px被渲染为多个物理像素，浏览器插值拉伸后模糊；解决方案是用伪元素配合transform:scale(1/dpr)缩放边框至1物理像素，并设transform-origin和pointer-events:none规避副作用。
-
垂直居中用align-items:center（flex）或place-items:center（grid）；父容器须设display:flex/grid和明确高度（如min-height:100vh），否则居中失效。
-
<mark>标签需用CSS显式声明background-color和color（如mark{background-color:#ff9e44;color:#fff;}），推荐加类名区分语义（如mark.warning），禁用嵌套，兼顾可访问性与深色模式。
-
必须用timeout参数兜底，否则低性能设备或复杂页面下可能永远等不到空闲；回调中需通过deadline.didTimeout区分触发原因，并据此调整执行策略。
-
iframe不是可选技巧而是绕不开的嵌入方案，但直接写<iframesrc="...">易致白屏、跨域报错、移动端异常、SEO归零或被拦截；必须用本地服务器访问确保http/https协议，慎用空src、硬编码宽高，优先CSS控制尺寸，启用sandbox最小权限，必设具体title以满足a11y与SEO。
-
会，浮动元素会覆盖标准流中的块级元素，因其脱离文档流后视觉层级更高，导致未浮动的div、p等被遮挡，而z-index对纯浮动元素无效。
-
Promise的回调属于微任务，优先于宏任务执行。JavaScript中，Promise的.then()、.catch()、.finally()回调被放入微任务队列，而事件循环会先清空微任务队列，再处理宏任务（如setTimeout、DOM事件）。这意味着Promise回调在同步代码结束后立即执行，而宏任务需等待微任务队列清空后才执行。例如，Promise.resolve().then(fn)会比setTimeout(fn,0)先执行。这种机制确保了异步操作的响应及时性和行为一致性，尤其在Promise链
-
Base64嵌入仅在消除路径依赖、生成单HTML文件时有效，非性能优化；会使HTML体积增33%，无法缓存，且大图（>10KBPNG/>5KBJPEG）导致主线程阻塞。
-
使用sed命令可批量优化CSS和HTML代码：首先将CSS中固定宽度替换为弹性单位如100%或clamp()，提升响应式适配；接着修改HTML内联样式中的px值为百分比，并外置样式；再通过正则删除重复或无用的选择器以减小文件体积；最后为flex、transition等属性自动添加-moz-、-webkit-等浏览器前缀，确保兼容性。整个过程高效精准，显著提升项目整洁度与跨设备兼容能力。
-
VSCode直接打开HTML文件控制台无输出，因浏览器以file://协议加载，禁用fetch、localStorage等API；应使用LiveServer插件启动http://127.0.0.1:5500服务，并确保地址栏为http://或https://开头。
-
gap属性仅对display:grid或flex容器生效，若父元素为inline-grid或子项被float/absolute干扰则失效；它不替代margin，且IE等旧浏览器需用grid-gap兜底。
-
gap不生效主因是父容器未设display:flex或浏览器不支持；iOSSafari14.5+、Chrome89+、Firefox63+才原生支持；flex中gap仅取第一个值，不支持row-gap/column-gap双值写法。
