-
防抖适合用户停止操作后执行的场景，如搜索联想、resize布局、表单校验；节流适合固定频率执行的场景，如滚动加载、鼠标移动追踪、Canvas动画。
-
横向滚动主因是body默认margin和html未隐藏溢出，需设html{overflow-x:hidden}、body{margin:0}；用outline快速定位超宽元素；注意transform/fixed元素及vw单位精度问题。
-
最稳解法是起本地HTTP服务：用python3-mhttp.server8000或npminstall-gserve后运行serve，再访问http://localhost:8000；双击打开因file://协议限制导致fetch失败、CORS报错、图片路径异常等问题。
-
应动态插入style节点而非link标签，因其绕过HTML结构、路径和CSP限制，支持作用域隔离与执行时机控制；需检查重复插入、使用data-plugin-style标记、避免innerHTML拼接，并在插件销毁时卸载样式。
-
用data-level属性标记层级，padding-left替代margin-left实现缩进，父级设position:relative，::after伪元素消除hover间隙，top:calc(100%+1px)，transition明确属性，body.menu-open控制滚动穿透，IE11降级为block布局。
-
<p>dataset属性用于读写HTML的data-*自定义属性，自动转连字符为驼峰命名（如data-user-id→userId），但值恒为字符串需手动转换，适用于轻量静态UI数据，不适用于敏感信息或高频更新场景。</p>
-
BEM通过强制组件级命名空间减少样式冲突：类名以组件名开头（如card），元素用双下划线（card__body），修饰符用双短横（card--shadowed），禁用嵌套选择器，从而杜绝全局污染和层叠不确定性。
-
通过opacity和transform结合transition实现弹窗动效，1.结构上使用modal容器包含内容框；2.初始隐藏并设置透明度、缩放及过渡；3.添加active类触发动画，改变透明度、可见性和缩放；4.JS通过类名切换控制显示隐藏，配合visibility和pointer-events避免误交互。
-
浮动元素无法通过z-index改变层级，因其未创建层叠上下文且z-index仅对定位元素有效。需同时设置position为relative、absolute等非static值才能使z-index生效。例如添加position:relative后，z-index即可正确控制层叠顺序。需注意父容器若创建了层叠上下文（如设置opacity），仍会影响子元素的最终显示层级。
-
BEM通过block__element--modifier命名约定实现样式作用域隔离，避免全局类名冲突；需严格执行命名规范、限定第三方样式影响范围，并接受合理类名冗余以保障可维护性。
-
IE10需用-ms-flexbox整套旧语法：display:-ms-flexbox、-ms-flex-pack、-ms-flex-direction等，不支持flex-wrap和三值-ms-flex，且属性值严格限定。
-
invert()能直接反转图片颜色，原理是线性反转RGB各通道值（0↔255），并非简单变黑白；常见误判源于原图近灰度或父级CSS干扰导致滤镜未生效。
-
真实权限必须由服务端控制，前端仅作安全降级和体验提示；权限表格需基于后端数据动态渲染，禁用CSS类或HTML属性做权限判断，所有敏感操作须经服务端鉴权。
-
LocalStorage存搜索关键词实现刷新不丢失、点击回填，三步完成存取：监听事件→去重限条→JSON存取；读取后渲染可点击列表并自动搜索；优化聚焦、键盘导航、清空及新词置顶；注意敏感词过滤、环境隔离与移动端重复触发。
-
CSStransition和@keyframes无法实现真正抛物运动，因其仅支持一维时间缓动，不能独立控制x(t)和y(t)的加速度叠加；真抛物运动需JS结合requestAnimationFrame实时计算物理轨迹。
