-
直接设body{margin:0;padding:0;}不够用，因浏览器对h1、ul、form等元素有独立默认边距；需配合box-sizing:border-box并重置关键元素或选用normalize.css。
-
focus/blur是监听元素获得/失去焦点最直接可靠的方式，仅在实际键盘/鼠标聚焦时触发，需元素可聚焦（如设tabindex）；推荐addEventListener而非onfocus属性，focusin/focusout支持事件委托。
-
子菜单不显示的主因是父级未设position:relative导致z-index失效；需同时满足父级relative定位、子菜单absolute+合理z-index，且避免overflow:hidden；移动端应改用:focus-within或checkbox模拟，注意IE11需JSfallback并添加ARIA属性。
-
Content-Security-Policy的frame-ancestors指令必须通过HTTP响应头设置，<meta>标签无效；值需加引号并以分号结尾，如frame-ancestors'self'；其会完全覆盖X-Frame-Options，不可混用。
-
瀑布流元素入场动画不能只靠统一animation-delay，因各列高度不一导致视觉顺序与DOM顺序错位；必须按实际渲染顺序递增延迟，:nth-child(n)适用于纯CSS多列布局，不适用于JS布局或GridMasonry。
-
可通过import()动态加载模块实现环境嗅探：先用条件逻辑确定路径再调用import()，封装为返回Promise的工厂函数，确保各环境模块接口一致，并在开发中结合HMR优化热更新。
-
原生aspect-ratio已稳定支持，但需用Less封装@supports降级方案：输出aspect-ratio属性的同时，对不支持环境采用padding-top+绝对定位的伪元素技巧，并注意font-size:0避免空白间隙。
-
margin:auto在flex容器中能居中是因为它会吞噬主轴和交叉轴的剩余空间；前提是父容器为flex且子元素未设置flex-grow/shrink，且交叉轴尺寸必须可计算。
-
需借助原生调试工具与特定测试流程验证HTML5页面在iOSSafari中的渲染、交互及性能：一、Safari远程调试；二、控制台日志输出；三、iCloud同步与本地服务器预览；四、第三方云端服务；五、特性检测与降级提示。
-
Array.from(newSet(arr))是原始值数组去重的最优解，时间复杂度O(n)，底层哈希优化，100万数据仅约3.2ms；而filter+indexOf为O(n²)，同场景慢260倍，且无法正确处理NaN。
-
结论：用@media(min-width:768px)控制桌面端显示、移动端默认隐藏+checkbox触发展开最稳；必须加viewportmeta标签，断点单位不能漏px，避免用a或submit按钮触发跳转，max-height过渡需设足够值，且移动端样式应写在媒体查询外作为默认。
-
aside应紧邻相关主内容使用，仅用于语义上关联但非核心的旁支信息，如文章末尾作者简介、代码旁注意事项等；不可脱离上下文单独置于body外层或页脚。
-
直接设置width/height无效，应使用transform:scale()配合transform-origin:center缩放，并通过margin调整间距，确保可点击区域≥24×24px且兼顾可访问性。
-
