-
必须将@import替换为@use/@forward、全局函数调用加模块前缀、除法改用math.div()，否则DartSass3.0.0发布后项目将编译失败；第三方库问题需等其升级或临时降级sass至1.62.1。
-
绝对定位需父容器设position:relative；避免百分比top/left，优先用px或vh；object-fit与background-image定位逻辑不同；禁用缩放或用visualViewport校正；Flex/Grid中注意基线对齐。
-
浮动导航栏HTML结构应为<nav><ul><li>首页</li><li>产品</li><li>关于</li></ul></nav>，仅对<li>设float:left，设display:block，<ul>用::after清除浮动防塌陷。
-
本文详解在动态表格中，如何借助jQuery的选择器与属性过滤机制，准确提取指定data-label或id的<td>元素文本值，并规避常见索引错位、DOM未就绪及事件委托失效等问题。
-
fetch读取本地HTML文件触发CORS错误是因file://协议被浏览器禁止跨域请求，解决方法是部署到本地HTTP服务或改用XMLHttpRequest；DOMParser解析HTML字符串更安全；Node.js中需用fs读取文件并注意编码与路径。
-
跨域CSS加载失败因服务端缺失Access-Control-Allow-Origin响应头，浏览器静默丢弃样式；需服务端配置CORS头（含Vary:Origin）或前端fetch+style标签兜底。
-
多层背景图片叠加必须严格遵循顺序、配对、语法三原则：background-image多值须用英文逗号分隔，各图需一一对应设置position/size/repeat，绘制顺序为从左到右、从上到下（最左在顶层），任一错误将导致整条声明失效。
-
Chrome自动翻译会实际改写DOM文本节点，唯一有效拦截方式是初始HTML中<html>标签的translate="no"且需配合法语种lang值；动态设置、meta标签、错误属性值均无效，input/textarea的value需单独设translate="no"。
-
CSS变量需配合var()引用才能生效，媒体查询中必须在:root下重设变量值，且引用处须写font-size:var(--font-size-base)；漏引用、定义位置错、单位缺失、!important覆盖或IE不支持均导致失效。
-
前端权限控制核心是通过RBAC模型，结合动态路由、操作指令和菜单生成，根据用户角色实现页面访问、按钮显示和菜单渲染的动态管理，提升用户体验。1.登录后获取用户角色与权限列表；2.依据权限动态添加可访问路由，阻止无效跳转；3.使用v-permission等指令控制操作可见性；4.后端返回菜单结构，前端递归生成侧边栏。最终，前端仅作界面适配与提前拦截，后端仍负责最终鉴权，确保安全与体验兼顾。
-
伪元素必须配合position:relative才能准确定位，因为::before的absolute定位依赖最近已定位祖先，若目标元素未设relative，伪元素会向上查找至body等意外容器，导致错位、飘移或失效。
-
纯CSS无法实现真正的Mesh渐变，但可通过多个radial-gradient()叠加、精准定位、rgba透明度控制及伪元素分层模拟苹果UI中的柔和多点径向渐变效果。
-
:focus-visible不能直接替代:focus，因其仅在键盘导航（如Tab）时触发，而:focus在鼠标、触摸、Tab时均触发；若替换会导致鼠标操作无焦点样式，影响可用性。
-
async函数中维护缓存一致性的核心策略包括：1.理解异步并发特性，避免因交错执行导致的数据不一致；2.采用写穿透、写回或缓存失效等策略，根据一致性需求选择合适方案；3.引入版本控制或乐观锁，防止并发更新冲突；4.使用消息队列或事件总线解耦数据变更与缓存更新；5.结合分布式锁确保关键操作的原子性。async函数因并发性和状态不可预测性使缓存一致性更复杂，需通过上述策略在性能、一致性和复杂性间取得平衡。
-
VSCode新建HTML文件本质是创建带.html后缀的空文本文件，需手动添加<!DOCTYPEhtml>等基础结构才能触发语法高亮、Emmet展开和LiveServer正常工作。
