-
通过Flexbox布局，将容器设为display:flex并配合justify-content:center与margin-left:auto，可实现左侧导航栏绝对水平居中、右侧图标紧贴其右且不破坏居中效果。
-
Flexbox通过flex-grow、flex-shrink和flex-basis控制子元素伸缩行为，实现响应式布局：flex:1常用于均分空间，结合媒体查询可调整不同屏幕下的布局表现，如等宽分布、固定与自适应组合、移动端堆叠等；需注意父容器设display:flex，避免width与flex-basis冲突，并用min-width防止内容重叠，提升布局灵活性。
-
JSON操作核心是JSON.parse()和JSON.stringify()，需防范非字符串输入、BOM字符、循环引用、特殊值丢失等问题，replacer/reviver是安全扩展点，严格遵循JSON规范（双引号、无尾逗号）。
-
使用CSStransition实现响应式动画需优先选择transform和opacity等高性能属性，避免布局重排；结合媒体查询控制断点动画，合理设置过渡时间与缓动函数，并通过JavaScript类名切换替代:hover以提升移动端兼容性。
-
作用域链是JavaScript中变量查找时从当前执行上下文向上逐级回溯的动态引用链，由函数定义时的词法位置决定，而非调用位置；查找时沿[[Environment]]单向线性进行，找到即止，不跨层或跨兄弟作用域。
-
TreeShaking是基于ES6模块静态分析的未使用代码移除机制，需满足使用import/export、工具正确配置、无副作用干扰等前提，并通过具名导出、按需引入等方式优化代码写法以提升效果。
-
Array.prototype.flat()是现代环境首选，支持深度控制和空位处理；旧环境可用reduce+concat手写递归实现，需用Array.isArray安全判断；慎用JSON黑魔法，应明确数据建模。
-
NotificationAPI本身不支持加密，因其仅接收明文参数并在系统层直接渲染；保护通知内容需服务端过滤、前端运行时解密（如WebCryptoAES-GCM）及配套HTTPS、权限控制等措施。
-
typeof判断基础类型（含function、symbol），instanceof判断引用类型是否由某构造函数创建；二者解决不同层面问题，混用易致误判。
-
JavaScript的try...catch仅捕获同步执行异常，不处理异步错误、语法错误、资源加载失败及Promise拒绝；需在调用处包裹且await异步操作，catch参数应命名避免覆盖Error，finally中避免return或throw。
-
可通过五种CSS方式为HTML页面添加背景图片：一、内联样式；二、内部样式表；三、外部CSS文件；四、渐变叠加；五、响应式适配，涵盖路径设置、平铺控制、尺寸调整及多设备兼容处理。
-
ES6模块是原生静态系统，import必须顶层声明；exportdefault与具名export需严格匹配导入方式；Node.js启用ES模块需满足.mjs扩展名或"type":"module"；import.meta.url是获取模块路径的唯一可靠方式。
-
HTML5没有html5play函数，所谓“花屏”实为video.play()调用时机不当、媒体源不兼容、解码失败或策略拦截所致，需通过事件驱动、格式校验、hls.js适配等真实手段排查修复。
-
本文详解React中因误用<Box>组件替代<form>导致AxiosPUT请求未触发的根本原因，并提供完整修复方案，包括表单事件绑定、防页面刷新、请求调试与最佳实践。
-
通过background-image叠加多层图片与渐变，结合background-position、background-size和background-repeat精确控制每层显示，background-color作为最底层保障，利用逗号分隔各层参数并一一对应，实现复杂背景效果。
