-
本文详解无需额外容器、仅通过纯CSS（display:block+margin:0auto）水平居中<img>元素的方法，兼容性好、语义清晰，比滥用Flexbox更合理。
-
auto-fill会保留空轨道以保持列结构，适合画廊等需对齐的布局；auto-fit则拉伸实际内容列以填满容器，避免空白，适合动态内容。两者结合minmax可实现灵活响应式网格，无需媒体查询即可适应不同屏幕尺寸，提升布局效率与视觉效果。
-
使用min-width防止百分比宽度在小屏下过窄，结合max-width与媒体查询优化响应式布局，确保元素在不同设备上保持可读性和合理尺寸。
-
ServiceWorker需手动注册、管理缓存并仅在HTTPS/localhost生效；注册须早于页面加载、检查支持性，经历install→waiting→active状态；fetch事件中应区分document与资源请求，结合预缓存与运行时缓存策略；缓存命名须版本化，并在activate中清理旧缓存。
-
rgba()仅影响颜色透明度，opacity影响整个元素及其子元素；通过rgba设置背景透明可实现图层叠加效果，结合opacity可控制整体视觉层次，常用于创建不干扰文字的透明遮罩。
-
async和defer仅在HTML5中有效，HTML4中被忽略；async下载完立即执行且不保序，defer则按序于DOM解析后执行，二者均只对带src的外部脚本生效。
-
HTML5应用无法真正卸载，需分层清理各宿主环境的状态：登出逻辑、缓存、权限、入口及第三方SDK状态，并按平台差异调用对应API，缺一不可。
-
Flex元素无法放大主因是缺乏剩余空间或受固定尺寸限制，需确保父容器为flex布局、移除width/height、合理设置flex属性并处理内容最小尺寸。
-
使用fr单位、minmax()函数及auto-fit实现列宽自动调整。1.fr按比例分配剩余空间，如1fr和2fr将容器分为三份。2.repeat(auto-fit,minmax(150px,1fr))使列数随容器宽度变化，每列最小150px，最大1fr。3.max-content根据内容宽度设置列，auto填充剩余空间。4.建议结合gap和min-width优化布局，确保响应式效果。
-
HTML5中需用iframe替代已废弃的frameset：一、基础嵌入，设src、宽高、name及CSS样式；二、CSSGrid划分多区域并置iframe；三、JS动态控制src及跨域postMessage通信；四、sandbox等安全属性限制权限。
-
功能检测比浏览器嗅探更可靠，应通过in、typeof、instanceof等直接检测API是否可用，结合CSS.supports()、try...catch和动态import()实现渐进增强与合理降级。
-
CacheAPI是现代缓存管理的核心，取代已废弃的AppCache，结合ServiceWorker实现离线访问与动态缓存。通过install事件预缓存资源、activate事件清理旧缓存、fetch事件实现网络优先策略，并采用版本化缓存名称确保更新。最佳实践包括使用内容哈希命名静态资源、合理设置动态内容缓存策略、借助DevTools调试及处理CORS限制，以平衡性能与数据新鲜度。
-
应避免循环中反复查询DOM，优先用document.querySelectorAll批量获取后处理；遍历子节点时用children而非childNodes；事件委托推荐用closest+matches。
-
Flexbox通过flex-wrap:wrap配合子项width或flex-basis控制列数，而非容器设列；推荐用flex:00+calc()和gap实现响应式布局，避免flex:1和margin混用。
-
ESM模块语法需用import语句、带.js后缀、区分default与named导出；不可混用CommonJS；import.meta.url替代__dirname；循环引用导致未初始化变量为undefined。
