-
使用组合选择器和BEM命名规范可有效避免CSS嵌套样式污染，通过提升特异性和作用域隔离，确保组件样式互不干扰。
-
text-overflow:ellipsis在Grid子项中不生效的根本原因是min-width:auto阻止截断，必须显式设置min-width:0才能触发省略号；还需white-space:nowrap、overflow:hidden三者共存且作用于同一文本容器，并有明确宽度约束。
-
微信红包金额分配必须由服务端完成，前端JavaScript生成随机数不可信，易被篡改导致资损；服务端应使用安全随机源（如SecureRandom）并采用线段切割法等可靠算法，确保每人≥0.01元、总额精确无浮点误差。
-
hue-rotate()是色相旋转而非替换，原始色相分散（如红、蓝、灰混杂）导致各元素偏移方向不同，故hue-rotate(180deg)无法统一变蓝，反出现紫、灰等杂色；需先用grayscale/sepia压平色相再旋转。
-
根本原因是flex子项默认min-width:auto阻止收缩，必须显式设min-width:0（横向）或min-height:0（纵向），并配合white-space:nowrap、overflow:hidden、text-overflow:ellipsis四者缺一不可。
-
结论：.clearfix::after必须声明content:""才能生效，因其是伪元素渲染前提；display:table比block更兼容旧Safari；clear:both不能直接作用于父容器自身，必须通过伪元素在内部末尾插入清除节点。
-
图片加载抖动本质是重排，因未加载时img宽高为0，资源就绪后尺寸突变触发layout→paint→composite；用aspect-ratio+width可提前预留空间，需配合width:100%及object-fit，旧版浏览器可用padding-top降级，同时HTML中保留width/height属性并避免height:auto覆盖aspect-ratio。
-
最稳妥的“彻底隐身”组合是noindex,nofollow，但必须正确写在head内、小写无空格，且不被HTTP头或JS注入干扰；仅靠nofollow链接或robots.txt无法阻止收录。
-
后端应返回结构化JSON，含items、has_more、next_offset字段；前端用insertAdjacentHTML('beforeend',htmlString)追加内容，禁用按钮防连点，并配合loading状态与错误提示确保交互稳定。
-
Highlight不能直接调用add()，因其是抽象基类；应使用document.highlightRegistry.set(name,highlight)注册高亮，name需与::highlight(name)完全匹配，且仅Chromium120+支持。
-
HTML本身不参与SourceMap配置，因其无编译转换过程；真正需配置的是构建工具（如Vite、Webpack）对JS/CSS生成的SourceMap，HTML仅作为资源容器被动引用。
-
<p>函数拦截器实现无侵入AOP日志系统，关键在于编译期重写而非运行时代理，依托C#12+的[InterceptsLocation]精准绑定源码坐标，通过静态拦截方法注入日志逻辑，并统一封装结构化输出与上下文信息。</p>
-
用max-height配合transition实现展开收起动画，因CSS不支持height:auto过渡，需设足够大且可控的max-height（如500px或100vh）作为代理值，配合overflow:hidden和class切换完成平滑动画。
-
caret-color:transparent在Firefox104+、Chrome105+、Safari15.4+、Edge105+中对contenteditable元素有效，但Safari15.3及更早、所有IE完全不支持；失效常见原因包括未获焦点、样式被覆盖、只读状态或Electron禁用blink渲染器。
-
根本原因是父容器未创建层叠上下文，需为.accordion-item等父元素设position:relative并合理设置z-index顺序，或用data-container="body"将下拉挂载到body下。
