-
BEM嵌套过深会引发选择器权重失控、可维护性下降、类名匹配性能损耗及动态拼接易出错等问题，应按语义独立性拆分block，严格区分--modifier（静态变体）与is-*（运行时状态），并配套工具链规范保障一致性。
-
text-align-last在Chrome/Firefox中需配合text-align:justify才生效，仅设text-align-last无效；它只作用于最后一行，单行时直接控制对齐；IE/Safari支持有限，兼容方案可用justify+::after伪元素撑开，但易错位；末尾空白或内联元素会干扰判定。
-
用nth-child实现表格隔行高亮的关键是选中tbody内偶数或奇数tr并设背景色：tbodytr:nth-child(even){background-color:#f5f5f5;}或tbodytr:nth-child(odd){background-color:#eef7ff;}，避免影响表头。
-
video标签默认非响应式，需显式设置width:100%、height:auto及object-fit；注意父容器布局、iOS全屏限制、viewport配置与固有尺寸影响。
-
IntersectionObserver更高效，因其是浏览器原生异步回调机制，仅在元素进出视口时触发，不阻塞主线程，无需手动节流，支持自定义容器、相交比例及rootMargin精准控制。
-
应使用transformtranslateY实现滚动容器内元素跟随，而非position:fixed或top；需监听容器scroll事件，动态设置translateY偏移，确保父容器无干扰transform/perspective/filter，且避免重排卡顿。
-
computed核心作用是基于响应式数据派生可缓存的响应值；购物车总价计算是典型应用，相比methods（无缓存）和ref（需手动更新），它自动追踪依赖、按需更新；支持深层响应性与多级依赖链。
-
本文详解如何为自定义搜索页添加Google风格的“I'mFeelingLucky”按钮，通过JavaScript拦截点击、拼接含&btnI参数的URL，实现一键直达首条结果，无需修改表单默认行为。
-
窄边框对前端开发有实际影响，主要体现在视觉负担减轻、横向信息密度提升及响应式调试更准确，但不提升编译或热更新速度；需注意摄像头布局异常、触控板缩水、散热不足及屏幕色准等问题。
-
BEM的__和--不能随意更改，因其是工具链识别和自动化处理的语法契约；改为-element或_modifier会导致stylelint、VSCode插件等失效，并引发样式泄漏与匹配错位。
-
必须写<metaname="viewport"content="width=device-width,initial-scale=1.0,viewport-fit=cover">，否则iOSSafari横屏或刘海屏下页面被系统UI裁切；需配合env(safe-area-inset-*)变量与CSSfallback（如max(12px,env(...))）实现安全区域适配。
-
本文详解jQuery实现的顶部同步滚动条在浏览器窗口缩放至90%以下时失灵的根本原因——重复绑定scroll事件导致冲突，并提供带防重复绑定、DOM就绪保障与性能优化的完整修复方案。
-
掌握Flexbox布局核心在于合理设置对齐方式、灵活使用flex属性分配空间，避免深层嵌套，并结合媒体查询实现响应式设计，提升页面性能与可维护性。
-
浮动影响响应式布局主要因破坏文档流导致父容器塌陷、小屏换行错乱，且依赖固定宽度难以自适应；需额外清除浮动，维护成本高。相比之下，Flexbox与Grid支持自动伸缩、对齐和二维布局，更适配响应式需求，推荐优先使用。
-
浮动导致父容器高度塌陷，应优先用clearfix伪元素清除；多列错位主因是box-sizing；IE兼容需zoom:1触发hasLayout；现代方案推荐display:flex或flow-root。
