-
Flex子元素高度不一致主因是父容器高度塌陷、子项设了固定height或min-height、混用float/absolute定位，以及align-content/stretch在多行时的拉伸行为；需确保父容器有高度、子项不干扰flex拉伸、显式设置align-content:flex-start应对多行，必要时改用Grid。
-
float在小屏下不能仅靠mediaquery设为none，因其无天然回退机制，需同步清除浮动、重置父容器清除方式并处理兄弟元素的clear；推荐改用flex或grid布局替代。
-
模块别名是解决大型前端工程路径混乱问题最直接有效的方式，它将冗长脆弱的相对路径如../../../utils/request替换为清晰稳定的语义化路径如@/api/request，并需在构建工具、TS配置、ESLint、IDE及测试工具中同步配置以保障全链路一致性。
-
box-shadow动画无反应的主因是初始或悬停状态使用了none或不合法值，导致浏览器无法插值；应始终用合法rgba值（如0000rgba(0,0,0,0)）起始，并协同调整blur-radius、offset和alpha实现自然扩散效果。
-
HTML压缩是安全有效的性能优化手段，核心配置需谨慎：collapseWhitespace和removeComments必须配合preserveLineBreaks与ignoreCustomFragments使用，避免pre/textarea内容错乱；removeOptionalTags慎用于旧浏览器；Webpack中html-webpack-plugin需显式配置minify对象而非布尔值；服务端Gzip/Brotli压缩比构建时HTML压缩更关键且高效。
-
FileSystemAccessAPI允许网页在用户授权后读写本地文件，支持Chrome86+和Edge95+，通过showOpenFilePicker()读取文件，showSaveFilePicker()保存文件，showDirectoryPicker()访问文件夹，createWritable()修改文件内容，并可请求持久化权限以减少重复授权，适用于文本编辑、笔记等需本地存储的场景。
-
使用:hover与opacity结合可实现鼠标悬停时的淡入淡出效果，常用于按钮、图片等元素。通过设置默认透明度和transition属性，再在:hover状态改变opacity值，实现平滑过渡。示例中元素默认不透明，悬停时变为50%透明度，0.3秒内完成渐变。典型应用包括图片变暗、按钮反馈及配合visibility实现完全隐藏。注意opacity取值范围为0到1，transition需定义在默认状态，子元素会继承父级透明度，影响文字清晰度。该方法性能良好，适合高频交互，提升界面流畅性。
-
HTML源码顺序决定语义和可访问性，order仅调整视觉顺序；主内容必须在HTML中前置，再用order配合flex-grow实现左中右布局。
-
长列表滚动中节点复用不当易致OOM，关键在守住三道防线：视图生命周期可控、数据绑定轻量、资源加载受控；须确保ViewHolder完全复用、图片加载带尺寸约束与内存复用、及时切断强引用链，并辅以监控兜底。
-
正确使用HTML有序列表需确保<ol>标签内嵌套<li>项，可通过start属性设起始数，type属性改编号类型，支持嵌套与CSS样式定制以实现多级结构和视觉控制。
-
crossorigin="use-credentials"由浏览器自动携带Cookie等凭证，模块加载器不管理Token；服务端必须返回精确Origin域名和Access-Control-Allow-Credentials:true，缺一则加载失败。
-
em标签用于语义强调而非视觉斜体，核心判断标准是删去后句子潜台词或责任归属是否改变；正确场景为口语重音区分含义，错误场景为船名、学名等纯视觉斜体。
-
removeEventListener失效的根本原因是传入的函数引用与绑定时不一致，或options参数不匹配；需使用具名函数或稳定变量引用，并确保capture、passive等选项完全相同。
-
Promise是异步流程控制的底层契约，其状态不可逆、then返回新Promise、catch仅捕获前序rejected，违背Promise/A+规范将导致静默失败或卡死。
-
<keep-alive>对iframe无效，因其缓存仅作用于VNode层，而iframe是浏览器级隔离容器，卸载即销毁整个浏览上下文；应改用v-show或display:none保状态，必要时通过:key强制刷新。
