-
使用CSS的absolute定位和opacity动画可实现无需JavaScript的悬浮提示。通过相对定位容器包裹触发元素与提示框，利用hover状态控制opacity和visibility实现淡入淡出。示例结构包含.trigger和.tooltip，核心样式设置position、transform、transition，配合伪元素::before添加指向箭头，支持多方向类名扩展，建议限制max-width并测试响应式表现以确保兼容性。
-
定制ESLint规则可解决团队特殊需求，如禁用console.log、强制命名规范等。通过创建插件，编写基于AST的规则逻辑，在create中匹配节点并报告问题，最后在.eslintrc.js中引入规则。利用ASTExplorer、添加测试、支持配置和修复建议可提升规则质量。掌握后能固化最佳实践，减少低级错误。
-
position:fixed使头部脱离文档流，导致后续内容从顶部渲染而被遮挡，需用margin-top或padding-top补偿；其定位相对于视口，不感知父容器边界。
-
Fixed定位按钮“飞”出容器是因为它脱离文档流、直接相对视口定位，而非父容器；需用sticky替代实现随容器滚动，用env(safe-area-inset-bottom)适配全面屏，避免v-if控制显隐。
-
JavaScript对象合并需据嵌套情况选浅拷贝或深拷贝：浅拷贝如Object.assign()、展开运算符仅复制第一层，引用类型共享内存；深拷贝如structuredClone()、JSON序列化或lodash.cloneDeep()递归复制全部层级，确保完全独立。
-
Grid是响应式列布局的首选方案，用grid-template-columns:repeat(auto-fit,minmax(250px,1fr))实现列数自适应，配合gap控制间距；Flex适用于高度差异大、仅需换行的轻量场景，需设flex-wrap:wrap和flex:11250px。
-
JavaScript代码分割和按需加载的核心是动态import()语法配合打包工具自动分包，减少首屏体积；支持await/.then、React.lazy+Suspense、chunk命名与预加载策略，并需注意SSR环境兼容性。
-
JavaScript双向绑定通过响应式系统实现数据与视图自动同步：Vue2用Object.defineProperty劫持属性的get/set，配合依赖收集与派发更新；Vue3改用Proxy代理整个对象，支持动态属性与数组索引赋值；视图层通过监听input等事件并赋值触发数据更新，形成闭环。
-
最稳妥的列表项间距方案是用margin-bottom：给li设margin-bottom，ul清除默认边距并可加padding-bottom保持末项呼吸感；gap是现代推荐方案但需兼容性兜底；border-bottom需配合:not(:last-child)避免多余边框。
-
ES6模块导出的是绑定而非值，加载在编译时完成且不支持条件导入；需用import()动态加载；exportdefault为匿名导出，具名导出需按名匹配；Node.js中需配置"type":"module"或使用.mjs后缀；绑定机制导致变量修改实时同步。
-
FIMO输出HTML不支持文本对齐控制。其HTML为固定模板，无align属性或CSS样式选项，对齐效果源于浏览器默认渲染；需通过后处理注入CSS或改用TSV+Pandas/R等工具实现自定义对齐。
-
掌握white-space、word-wrap和word-break属性可解决文本溢出问题：white-space控制空白符和换行，常用normal、nowrap和pre-wrap；word-wrap（overflow-wrap）用于长单词断行，break-word防止溢出；word-break定义字符间断行规则，break-all适用于表格防溢出；结合使用可实现单行省略、多行安全换行及中英文混合布局，提升页面美观性与健壮性。
-
在Chrome中，::first-letter伪元素与-webkit-line-clamp同时使用时存在渲染冲突，导致首字母无法正确大写；本文提供兼容主流浏览器（Chrome/Firefox/Safari）的可靠实现方案。
-
避免FOUC的核心是控制样式加载时机与渲染同步：提前在路由解析阶段注入，用link.onload监听完成，配合临时style标签占位，并确保SSR时首屏CSS预置，同时添加link.onerror降级处理。
-
应使用<link>引入公共CSS文件并置于页面专属样式之前，禁用@import，通过CSS自定义属性实现轻量配置，构建阶段用CSSModules或提取插件确保样式唯一打包。
