-
必须用CSS变量存头部高度，因为JavaScript动态获取的offsetHeight会受缩放、字体加载、行高变化影响而波动，硬编码像素值易错位；CSS变量能将真实渲染高度同步给CSS，确保transform或margin-top精准抵消占位。
-
本文介绍如何使用纯JavaScript实现基于多组复选框的精准产品筛选功能，支持在单个data-*属性中存储多个空格分隔值（如data-color="redwhiteblue"），并按“所有选中条件必须同时满足”的逻辑动态显示匹配的产品项。
-
flex-wrap:wrap生效需同时满足容器宽度受限、子项设min-width或flex-basis；推荐用minmax()+repeat(auto-fit,...)替代calc()，IE11需降级为媒体查询或inline-block。
-
:not(:last-child)是最直接兼容的方式，适用于同级元素样式排除；:nth-last-child(n+2)更稳定但IE8不支持；混合标签应优先用:last-of-type；动态场景推荐类名或JS兜底。
-
BroadcastChannel不支持MessagePort，因其仅允许结构化克隆数据，而MessagePort无法被序列化，强行传递会抛出DATA_CLONE_ERR错误；正确方案是用BroadcastChannel广播任务信号，再通过SharedWorker或MessageChannel建立点对点通信通道。
-
HTML选区本质是DOM边界而非字符串，由anchorNode/focusNode及对应偏移量定义；selection.toString()会丢失结构和语义，应优先用getRangeAt(0)?.toString().trim()且需校验rangeCount>0。
-
根本原因是container响应式定宽而container-fluid需父容器无宽度限制；Bootstrap5中其默认12px内边距导致不贴边，须用自定义CSS清除，且需排查viewport、全局样式及嵌套逻辑。
-
IDBValidKey包括字符串、数字（NaN和Infinity除外）、Date对象及元素均为IDBValidKey的数组，因其需满足唯一排序、稳定序列化和无歧义比较；null、undefined、对象、布尔值因破坏这些原则而被禁止。
-
css-vars-ponyfill是IE下支持CSS自定义属性的最可行方案，它在运行时解析并替换var()，支持嵌套、calc()内使用、动态更新及媒体查询作用域，但需注意IE对calc()+var()的兼容限制和动态更新时需显式触发重计算。
-
animation-iteration-count:infinite不生效的常见原因包括：未设置animation-duration、@keyframes缺少0%/100%或二者相同、animation-fill-mode未设为forwards/both、animation-play-state:paused或will-change导致异常，以及元素隐藏、JS重置动画或系统偏好reducesmotion。
-
@import在模块化项目中无法按需加载，因其是同步阻塞的原生CSS规则，不参与JS模块依赖图，Webpack/Vite默认不支持其条件加载或拆分，导致全量打包；推荐改用JS层动态importCSS、CSSModules配合提取插件或CSS-in-JS方案。
-
横向虚拟滚动需用固定宽外层容器+flex内层列表，通过translateX偏移实现；计算可视范围时以容器边界为准，结合拖拽交互、懒加载和响应式重算。
-
前端组件化通过模块系统、框架组件、WebComponents和Hook等方案提升复用性与开发效率，适用于不同场景。1.ESModules/CommonJS用于逻辑复用，如封装API请求；2.React/Vue等框架支持UI与逻辑封装，实现高内聚组件；3.WebComponents提供跨框架原生组件能力，适合设计系统；4.函数式与Hook模式提取可复用状态逻辑，如防抖提交。方案选择需根据项目规模、技术栈和协作需求，核心是保持接口清晰、职责单一，以最大化复用价值。
-
表单拆分需以集中状态管理（如formData对象）为核心，统一通过updateField更新、localStorage持久化（配合beforeunload）、跨步骤校验，并用FormData手动聚合多表单数据，禁用formdata事件依赖。
-
CSS变量管理主题色是最灵活易维护的方案，通过语义化命名（如--color-primary）、全局定义、组件引用、多主题切换（class或JS控制）、fallback默认值及局部重写实现高效主题管理。
