-
margin-left:auto靠右生效的前提是元素处于干净的flex上下文：父容器需为display:flex且未被justify-content等覆盖，目标元素须为直系子项、无DOM干扰节点，并在flex-direction:row下使用。
-
FetchAPI是现代JavaScript发起网络请求的标准方式，比XMLHttpRequest更简洁、强大且契合Promise/async-await；它默认不rejectHTTP错误状态，需手动检查response.ok或status，并支持配置method、headers、body等选项，但不原生支持超时和上传进度。
-
box-sizing:border-box不能让margin不参与宽度计算，因margin始终不参与自身宽高计算；但能使padding被包含在width/height内，增加padding时内容区自动压缩以保持总宽不变。
-
使用justify-content和align-items可实现居中。设置display:flex的容器通过justify-content:center实现水平居中，align-items:center实现垂直居中，需确保容器有高度（如height:100vh），支持单个或多子元素整体居中，方法简洁兼容现代浏览器。
-
浮动与动画结合可实现轻量级视觉效果，如产品卡片渐入。通过float布局元素并用animation添加入场动效，配合clearfix防止塌陷，适用于简单多列展示场景。
-
transform中rotate和scale可在同一声明中用空格分隔，顺序决定执行先后；必须合并书写，否则后声明会覆盖前声明；动画中各关键帧需完整写出transform值且函数顺序一致。
-
应避免滥用<hr>，它仅适用于主题段落间的语义分隔；多数视觉分隔需求应使用<divclass="divider">配合CSS实现，兼顾样式可控性、可访问性与暗色模式支持。
-
Math.min(...prices)可快速获取价格数组最小值，但需先过滤合法数字（typeof为number且isFinite），空数组时应兜底返回null；异步场景须等待数据就绪；折后价需先map再取最小；超千项建议用reduce避免栈溢出。
-
<p>data-*属性必须用短横线分隔，不能用驼峰；dataset是只读的DOMStringMap，修改需用setAttribute()；获取值恒为字符串，需手动类型转换；含下划线等非法字符或需保留空白时应使用getAttribute()。</p>
-
使用grid-template-columns:repeat(auto-fill,minmax(280px,1fr))可实现卡片平均、响应式排列，浏览器自动计算每行列数并保持宽度一致；auto-fill预留空列，minmax定义弹性范围，配合grid-gap和语义化结构即可高效布局。
-
TailwindCSS不提供scroll-smooth类，生效需直接设置html{scroll-behavior:smooth;}，并确保href与id严格一致、目标元素已渲染、无display:none、且兼容浏览器支持。
-
严格模式是让JS引擎立即报错的开关，不新增语法，仅将静默失败等行为转为明确错误；启用需在脚本顶部或函数体首行写"usestrict"字符串，ES模块默认启用，但CommonJS和传统script仍需手动添加。
-
必须为::before/::after设content:""、position:absolute，button设position:relative且z-index:0，伪元素加z-index:1和pointer-events:none；动画用transform（非width/height），延迟用transition-delay，移动端加-webkit-tap-highlight-color:transparent并避免过短时长。
-
email类型的input元素触发浏览器原生基础格式校验：必须含@且前后均有非空字符，不验证域名真实性或邮箱可用性；校验发生在表单提交或调用checkValidity()时，移动端自动切换email键盘。
-
答案是掌握WebAudioAPI需理解音频节点连接、实时分析与图形同步。通过创建振荡器、滤波器等节点并连接形成处理图，结合AnalyserNode提取频谱或时域数据，再利用Canvas实现频谱柱状图等可视化，使用requestAnimationFrame持续更新画面，可构建动态音频应用。注意采样率影响与性能优化。
