-
HTML瀑布流失效的根本原因是图片缺乏可预测的宽高比。必须显式设置width/height或aspect-ratio，配合srcset/sizes、禁用首屏lazy加载、避免column-count截断、监听img.load而非仅IntersectionObserver，并启用grid-auto-flow:dense。
-
移动端页面缩成一团、文字小、点击错位，90%因viewport未写或写错；必须在<head>中硬编码<metaname="viewport"content="width=device-width,initial-scale=1.0">，禁用user-scalable=no等限制缩放属性，避免JS动态插入或固定width值。
-
NotificationAPI仅负责前端主动显示弹窗，不支持后台接收消息；WebPush需ServiceWorker持久监听并调用showNotification()，且依赖VAPID、PushManager订阅及后端合规推送协议。
-
flex-direction本身不能实现多行文本垂直居中，真正起作用的是align-items（交叉轴居中）和justify-content（主轴居中），需配合display:flex容器、明确高度及清除子元素默认margin。
-
console.assert仅在第一个参数为false时输出信息，需确保开发者工具控制台开启且未过滤assert日志，生产环境可能被构建工具移除；支持多参数格式化但不中断执行，非错误处理机制。
-
HTML5跨平台协作问题源于BOM、换行符、路径分隔符、Git配置等元信息；VS需关闭UTF-8withBOM、设LF换行符，并配合.editorconfig与.gitattributes统一规范。
-
纯前端canvas实现16×16网格像素头像生成器，通过镜像填充、预设色组、坐标转换和伪随机策略保证结构合理与视觉协调。
-
系统性掌握HTML5需分三阶段：一、掌握语义化标签结构，如<header><nav><main>等及DOCTYPE声明；二、通过复刻响应式页面练习盒模型与媒体查询；三、用JavaScript实现DOM获取、事件监听与内容修改。
-
锚点跳转失效的根源不在HTML语法，而在页面结构、CSS（如fixed导航遮挡、scroll-margin-top缺失）、JS干预（异步渲染、重排）及id存在性；推荐用scrollIntoView()配合scroll-margin-top精准控制。
-
WebLocksAPI仅提供同源单例资源的互斥执行控制，不负责权限同步；锁名须含业务唯一标识且URL-safe，mode必须显式设为'exclusive'，ifAvailable应启用以防阻塞，Safari不支持需服务端幂等兜底。
-
动态导入与预加载可提升前端性能。通过import()按需加载模块，减少首屏体积；结合webpackChunkName、webpackPrefetch等魔法注释命名并预取chunk；路由级组件和非关键功能（如图表）采用动态加载，辅以空闲时预加载高概率模块，优化资源加载时机，加快响应速度。
-
viewport-fit=cover必须在每个iframe中显式声明，否则env()失效；因WebKit不继承父级配置，iframe需独立设置viewport且容器需100vh/100vw，或改用postMessage动态传递安全距离值。
-
blockquote缩进源于浏览器默认margin（非padding或text-indent），主流引擎设为1em或约40px；重置应直接覆盖margin，如margin:0，避免误用其他属性导致RTL错位或布局异常。
-
虚拟滚动处理不固定高度列表的核心是动态测量+高度缓存+位置映射；通过元素测量首次获取真实高度并存入Map，构建前缀和数组offsets实现O(1)偏移计算，结合二分搜索确定可视范围，并用ResizeObserver监听动态变化、节流更新缓存与offsets。
-
本文介绍如何使用纯CSS实现按钮内嵌箭头图标，并配合平滑悬停动画（右向箭头滑入效果），提升用户体验与界面引导性，无需额外JavaScript或图标字体库。
