-
Provide适合局部树内隔离状态，Pinia适合跨组件需调试持久化的全局状态；二者互补协同，按状态生命周期归属选择：长期有意义归Pinia，仅模块内有效归Provide。
-
正则表达式可初筛Hardcoded字符串，但需结合上下文判断真伪；推荐AST解析或专业工具（如Semgrep、SonarQube）提升准确率。
-
styled-components的样式注入不发生在每次渲染，而是在组件挂载或主题变更时检查并按需插入；动态插值绑定React渲染周期，导致运行时计算开销显著高于构建时处理的CSSModules。
-
按钮点击区域偏移主因是absolute定位时未校准padding对热区的影响，应检查定位基准、用transform替代top/left、加outline验证热区，并统一box-sizing:border-box。
-
dfn标签仅在术语首次出现且紧邻完整定义语句时使用，必须嵌套于语义化块级元素中，优先取title属性值作为定义内容，错误用法会导致语义断裂与辅助技术失效。
-
HTTPS页面加载HTTP资源会被现代浏览器默认阻止，主动混合内容（如script、iframe）直接报错阻断，被动内容（如img）在Chrome94+也统一阻止；应将所有http://替换为https://，并检查API、第三方SDK及构建流程。
-
用position:absolute+top:0+left:0+width/height:100%使图片叠于父容器左上角，父容器需设position:relative和明确高度，配合z-index与opacity切换，预加载图片并用object-fit:cover防变形。
-
后端收不到字段八成是误用disabled而非readonly；disabled使字段值不提交，readonly则正常提交且支持聚焦复制；select等不支持readonly的元素需用替代方案。
-
button:active无反应主因是未触发重绘或被父容器裁切，需设position:relative、禁用overflow:hidden并添加transition；移动端需用原生button或role="button"+tabindex，配合viewport设置或touch事件模拟。
-
fetch“成功”指网络通信完成而非业务正常，404/500等状态码仍会resolve；需用res.ok判断业务失败，网络错误才reject。
-
Flex子项margin-top/bottom“穿透”父容器是因Flex容器未形成BFC导致外边距塌陷；解决方法是给容器加overflow:hidden/auto创建BFC，或用padding替代margin，优先使用gap控制子项间距。
-
HTML本身没有“设置文档推荐应用”的能力，所谓“推荐应用”是操作系统或浏览器根据文件扩展名、MIME类型、Content-Disposition响应头等综合判断的，HTML页面无法强制指定哪个App打开下载文件。为什么链接点击后没用指定App打开？用户常误以为加个target或rel就能控制本地App启动，其实不行。浏览器对这类链接的处理逻辑是：先检查该文件扩展名（如.pdf、.xlsx）是否被系统注册了默认应用再看响应头里有没有Content-Typ
-
HTML抽屉组件不强制要求position:fixed，但可靠实现普遍采用它以确保脱离文档流、覆盖内容且滚动稳定；应避免absolute导致错位，优先用transform/opacity动画并动态管理will-change。
-
hasOwnProperty用于判断属性是否为对象自身可枚举属性而非继承自原型链；for...in会遍历原型链上可枚举属性，需用Object.prototype.hasOwnProperty.call过滤；Object.keys()更安全简洁，仅返回自身可枚举字符串键。
-
父元素设relative，子元素设absolute可实现精确定位。relative保持文档流并作定位参考，absolute使子元素脱离文档流，相对于最近已定位祖先定位，常用于覆盖、弹窗等场景。设置时父级无需偏移，子级用top、left等定位，注意层级和父级padding影响。
