前端开发

一种基于jQuery的下拉菜单悬停保持方案，采用mouseenter mouseleave搭配setTimeout clearTimeout，同时监听主菜单项与子菜单区域，通过事件委托与定时器协同控制显隐逻辑，设置300ms延迟隐藏，避免鼠标快速划过导致子菜单闪退，实现平滑稳定的交互效果。

在React项目中，通过设置根元素高度100%并利用Flexbox的flex:1属性，使内容区自动填充剩余空间，实现不依赖vh单位的粘性页脚。该方案避免移动端因地址栏变化导致的页面抖动，采用min-height:100%与flex:1组合，确保跨平台稳定响应。

在TailwindCSS中全局更改默认字体的正确方法是直接修改`tailwind config`中的`theme fontFamily sans`，用自定义字体替换原有定义并保留后备字体栈。还需确保`@font-face`中的字体名称与配置一致，并验证资源路径有效，即可实现全局字体自动生效。

全屏背景图常见问题源于高度继承链断裂、Bootstrap栅格padding干扰、移动端视口单位失准及图片加载失败。解决需设置html与body高度为100%，用min-height:100vh替代height:100vh，配合background-position:center；避免在container内加背景图，移动端禁用background-attach

在Vue中，父组件onMounted直接访问子组件通过defineExpose暴露的ref会得到null，原因是子组件mounted钩子内对ref赋值后，需等待进入异步微任务队列才能完成。因此必须使用nextTick()等待响应式更新彻底结束，确保子组件DOM引用已真正的就绪后再访问。这是Vue异步更新机制的关键特性。

Bootstrap5 2+的Popover边框颜色由CSS变量--bs-popover-border控制，全局在:root中修改，局部通过customClass参数添加自定义类覆盖。Bootstrap4需直接覆盖 popover的border-color。CSS变量方式便于统一管理，修改一处即可影响所有Popover实例。该变量可设置任何有效颜色值，如十六进

Flex容器设transform会创建新BFC，导致justify-content和align-items失效。可将transform移至子元素，并设flex:00auto锁定尺寸。另需排查父容器高度塌陷及img行内元素问题，加position:relative可修复。

Token过期触发401时，若刷新令牌请求也被同一拦截器捕获，将导致无限重试循环。根本解法是创建纯净的、无响应拦截器的独立axios实例处理刷新请求，并添加_retry标记与URL排除双重防护，刷新失败时彻底清理状态并跳转登录页。

移动端双击缩放导致300ms点击延迟，通过`touch-action:manipulation`该属性可绕过浏览器等待期直接触发事件，从而解决延迟问题。需精准添加至交互元素，禁止全局设置，注意其继承性及浏览器兼容性，以避免破坏滚动或缩放功能。

利用`position:fixed`创建独立DOM层控制位移实现多层视差，避免使用`background-attachment:fixed`（不响应`z-index`且移动端失效）。背景固定仅限`body`或全屏容器。推荐采用滚动监听、`requestAnimationFrame`节流结合`background-position`像素值计算，该方案可解决多层

使用grid-template-areas固定侧边栏，避免其参与auto-fill计算导致小屏布局失控。主内容区内部嵌套auto-fill与minmax控制卡片列数。媒体查询小屏时隐藏侧边栏并调整grid-template-columns。注意IE11等兼容性降级，以及侧边栏隐藏时JS同步清理定时器或地图实例。

推荐使用rgba()或hsla()替代纯黑 000，选择比背景略深的灰，透明度控制在0 1-0 3之间，阴影更柔和自然。模糊值越大，透明度需越低，如模糊30px时alpha约0 05。此方法同样适用于内阴影和文字阴影，能有效提升界面质感，营造自然光影。

Bootstrap5的Tooltip在移动端默认通过点击事件触发，会导致闪现问题。方法为：使用manual模式，通过touchstart启动定时器，在touchend和touchmove时清除定时器，从而实现长按持续显示。需阻止默认事件，并注意避免与data属性混用，以免产生干扰或冲突。

Flex布局中，flex-basis优先级高于width，仅设为auto时回退到width。它沿主轴方向生效：水平轴覆盖width，垂直轴覆盖height。IE兼容性建议使用-ms-flex简写并保留width作为降级方案。

CSS的`scrollbar-gutter:stable`属性可预留滚动条空间，防止内容因滚动条出现消失而跳动。需配合`overflow-y:auto`生效，注意容器高度与子元素影响。`both-edges`适用于对称布局，普通场景用`stable`即可。对不支持的老浏览器，可用JS动态设置padding或`@supports`降级。