-
分离规则集是Less中不绑定选择器、不自动展开的可复用样式块，本质是“可执行的样式函数值”；它可赋值变量、传参、条件调用、作用域隔离，而mixin仅支持调用即展开。
-
SCSS中@each用于编译期遍历列表或地图：列表用@each$itemin(a,b,c)，地图用@each$key,$valuein(k:v)；@for适用于数字范围生成类名；@while因变量不可重赋值且无递归支持，极少实用。
-
HTML表单通过form和input标签实现用户交互，使用action和method属性指定提交地址与方式，结合type类型与label标签可创建登录、注册等功能，合理设置required、name等属性提升可用性与数据准确性。
-
闭包是实现记忆化函数最自然、最轻量的方式，它通过外层函数创建私有缓存并返回可访问该缓存的新函数，使缓存持久、私有且隔离。
-
使用Flexbox的gap属性替代margin可有效控制按钮组间距，避免首尾多余空白。通过设置display:flex和gap值，如8px，实现按钮间均匀间隔。结合justify-content属性（如flex-start、center、flex-end、space-between）可灵活对齐按钮组，同时保持间距一致。响应式设计中，可用媒体查询调整gap值，适配不同屏幕尺寸。该方法比传统margin更简洁易维护，推荐优先使用。
-
旧版Firefox（<60）浮动布局异常主因是严格遵循CSS2.1浮动边界与行框重排规范，而非私有属性缺失；需显式设display:block、box-sizing:border-box，注意vertical-align、sub-pixel误差及clear被stackingcontext或margin合并干扰。
-
BackgroundFetch不能直接下载HTML并渲染，仅Chrome84+/Edge90+支持，需HTTPS、用户手势等条件；它只后台下载资源，不处理DOM或缓存，真正可行方案是配合fetch+CacheAPI预存HTML。
-
IIFE是旧项目中零配置的作用域隔离手段，通过函数作用域切断变量声明、事件绑定、定时器等副作用外溢，确保不污染全局命名空间，所有声明默认私有，全局对象需显式传入。
-
nth-child基于DOM静态位置索引，不响应动态插入、显隐或重排；JS插入新元素会改变原有元素序号，导致样式错位，需手动重置类名或用MutationObserver监听更新。
-
preload失效主因是未严格匹配as属性、缺失crossorigin、或未将资源接入渲染流程，如字体需as="font"+crossorigin，CSS需onload切换rel，否则仅下载不生效。
-
Promise.withResolvers用于提前创建可外部决议的Promise，天然适配状态机设计：预定义状态+可控跃迁，各状态独立持有resolvers，通过resolve/reject主动推进流程，支持取消、超时与多分支跳转。
-
直接给.login-box容器设background-image最稳妥，需同时设置background-size:cover、background-position:center、background-repeat:no-repeat，并加background-color降级；配遮罩层::before提升文字可读性，用min-height:100vh保障响应式高度，高DPR屏需提供@2x图。
-
txt转html本质是套HTML结构，需先用html.escape()转义特殊字符，再将换行符替换为，头部写死DOCTYPE和body开始标签，尾部闭合，避免XSS风险与编码错误。
-
用setTimeout包裹dispatchEvent的核心目的是将事件派发推到下一个宏任务，避开同步阻塞、让浏览器有机会渲染或响应；它不改变事件语义，但使监听器异步执行，避免UI冻结。
-
width:max-content并非万能，仅在display:inline-block或table时生效，Firefox严格按内容计算，Chrome可能忽略内联换行；fit-content更稳妥，兼容性好且对flex/grid有效，IE需fallback为inline-block+white-space:nowrap。
