-
flex-grow无法直接平分宽度，因其分配的是剩余空间而非容器总宽；需设flex-basis:0（如flex:110）切断内容影响，并配合box-sizing:border-box、min-width:0及统一字体/内边距才能实现三列严格等宽。
-
pointer-events:none可解决上层DOM遮挡下层可交互元素的点击问题，如模态遮罩、图表图例、拖拽手柄等场景，使事件穿透至底层，同时保留视觉效果；但需注意继承性、子元素需显式设auto、移动端兼容性及渲染顺序影响。
-
语义配色需用业务类名（如.text-error）替代外观类名，结合CSS自定义属性和currentColor实现可维护性，同时适配高对比度模式与forced-colors媒体查询。
-
capture是布尔属性，需配合type="file"和精确accept值（如image/*）才能触发原生设备；iOSSafari要求input静态存在于DOM、用户手势直触且禁用桌面模式；Android行为不一，微信X5基本不支持；应以getUserMedia+MediaRecorder为可靠替代方案。
-
html5play函数不支持m3u8的根本原因是浏览器原生video标签大多不支持HLS协议，仅Safari默认支持；其本质是封装原生video元素，无内置解协议能力，直接赋值m3u8会失败。
-
Node.jsCluster模块通过主进程调用cluster.fork()创建多个worker进程，利用多核CPU提升并发性能；主进程（cluster.isMaster为true）仅负责fork、监听exit事件并重启worker，不启动HTTP服务，worker进程（cluster.isWorker为true）运行业务逻辑并共享同一端口，由内核通过SO_REUSEPORT实现负载均衡。
-
Less组件化需三原则：一用scope前缀隔离变量（如@card-bg-color）；二限制嵌套≤3层并禁跨组件@import；三主题切换须预编译多套CSS而非运行时改变量。
-
modulepreload是<linkrel="modulepreload">用于预获取模块而不执行，区别于<scripttype="module">的立即解析执行；它需绝对路径、as="script"，且服务端需配CORS，适用于明确依赖链或动态导入前的预加载。
-
用CSStransform+transition可实现宝箱开盖动画：盖子需设transform-origin:topcenter并绕顶部边缘旋转，父容器加transform-style:preserve-3d；用cubic-bezier(0.34,1.56,0.64,1)增强弹开感；双层box-shadow模拟高光与动态阴影；渐变背景模拟木纹反光；JS需加锁防重复触发，监听transitionend同步状态；移动端需touch-action和will-change优化性能。
-
WeakMap能避免内存泄漏，因其键对DOM元素持弱引用，元素被移除后可被GC回收；而Map等强引用会阻止回收。应以元素为key、全局WeakMap管理状态，避免反向引用和原始值作key。
-
ResizeObserver是监听组件尺寸变化的最优方案，它直接绑定元素、精准触发回调、避免全局事件冲突，支持iframe和阴影DOM，且提供contentRect数据；相比window.resize，它能感知布局重排等细粒度变化。
-
直接修改:root中的CSS变量值可实现全局换色，但前提是所有颜色使用处均已替换为var(--brand-color)，且无JS硬编码、内联样式或第三方库绕过；需手动替换background-color、color、border-color、box-shadow、outline-color、伪元素样式、SVG的fill/stroke、表单状态色等，同时确保变量名准确、加载顺序正确、无语法错误，并避免IE兼容性问题。
-
答案：通过使用:focus伪类设置边框颜色、去除outline并添加box-shadow，可解决表单输入框聚焦样式不明显问题。1.为input添加:focus样式以明确边框颜色；2.设置outline:none消除浏览器默认轮廓；3.使用box-shadow增强视觉反馈；4.必要时提升CSS优先级或使用!important；5.引入CSSReset或Normalize.css统一浏览器默认样式，确保兼容性与无障碍访问。
-
CSS动画通过@keyframes定义关键帧并结合animation属性实现，animation-play-state用于控制动画的播放与暂停状态；1.使用@keyframes命名动画并设定各阶段样式；2.通过animation属性将动画应用到元素，设置时长、速度曲线、延迟、次数、方向及播放状态；3.利用animation-play-state:paused实现鼠标悬停暂停动画；4.选择动画方式时，简单高性能场景优先用CSS，复杂交互动态计算则选JS；5.复杂交互可通过animation-delay、an
-
ServiceWorker未触发waiting状态的主因是HTTP缓存导致浏览器未识别脚本变更，需通过添加时间戳注释、禁用强缓存解决；提示更新应在reg.waiting为true时触发，而非controllerchange；activate阶段须谨慎清理缓存并确保fetch兜底；WebView环境应避免无条件skipWaiting，改用静默更新策略。
