-
window.scrollTo({top:0,behavior:'smooth'})不生效主因是CSSscroll-behavior被覆盖、滚动容器非viewport或Safari≤15.4不支持；应优先用document.documentElement.scrollTo()并检测scrollBehavior支持性，fallback用requestAnimationFrame实现cubic-out缓动。
-
在HTML表单中添加CSRFToken需后端动态注入隐藏字段<inputtype="hidden"name="csrf_token"value="xxx">，每次请求刷新，Ajax提交时需手动获取并传入body或header，后端校验须恒定时间比对且统一错误提示。
-
HTML弹窗被拦截时浏览器静默失效，不抛错、不返回失败值、不触发回调；需在用户手势上下文（如click事件）中同步调用window.open()，或采用预留窗口（'about:blank'）再导航的合规方案。
-
本文详解如何通过维护当前索引、重构数据结构与分离关注点，实现宝可梦图鉴中按需渲染单个条目（如初始显示妙蛙种子），而非一次性显示全部数据。
-
position:sticky在flex布局中失效，因flex容器默认不创建滚动上下文；应改用fixed定位或确保父容器有明确高度和overflow-y:scroll，并避免transform等干扰属性。
-
直接结论：在滚动容器上加overflow-anchor:none能关闭浏览器自动滚动补偿，避免内容插入时视口跳动；但必须配合“触底检测”逻辑，否则用户向上翻页时新消息会把当前阅读位置顶走。
-
CSS变量不能在content属性中直接使用，因规范限制content仅支持字符串、attr()、counter()等特定值；可用counter-reset配合counter()间接显示数字变量值。
-
flex居中失效最常见的原因是父容器未设display:flex，或子元素脱离文档流；需确认父容器启用flex、子元素未用absolute/floating，且父容器有明确高度。
-
flex子项不收缩是因默认min-width:auto限制，需显式设min-width:0解除；配合flex:110、white-space:nowrap、overflow:hidden、text-overflow:ellipsis才能实现省略号效果。
-
可用纯CSS实现抽象化猫Loading动画：通过clip-path裁剪与transform逐帧驱动，配合@keyframes控制耳朵抖动（错峰延迟+非线性缓动）、眯眼呼吸（异步scaleY+自定义cubic-bezier）及顿挫式尾巴摆动（steps(2,end)）。
-
font-display必须显式设为swap以避免首屏白屏，它用系统字体先渲染再替换；preload字体需加crossorigin、as="font"和type；只用woff2格式；启用font-optical-sizing:auto提升可读性。
-
选2D引擎更适合微信/抖音小游戏——因3D在H5环境加载慢、包体大、低端机掉帧严重；CocosCreator3.x首屏加载超8秒，而2D仅1.2秒。
-
counter-reset与counter-increment是CSS计数器机制的配对核心：前者声明并初始化计数器（如counter-reset:section;），后者在匹配元素上触发递增（如counter-increment:section;）；二者名称必须严格一致，且counter-reset必须作用于父容器才能使子元素的counter-increment有效。
-
使用HTML锚点或JavaScript可实现返回顶部功能。HTML锚点通过<ahref="#top">跳转，简单但无平滑效果；JavaScript调用window.scrollTo({top:0,behavior:"smooth"})实现平滑滚动，并可结合滚动事件控制按钮显示，提升用户体验。建议固定定位按钮于右下角，初始隐藏并按滚动距离显示，适配移动端与可访问性，避免固定头部遮挡内容。
-
all属性非万能，误用会破坏可访问性与兼容性；应优先精准控制属性，慎用all，避免全局应用，推荐revert而非unset或inherit。
