-
纯CSS实现toggle开关：用label包裹checkbox，设label为relative定位，滑块用label::after绝对定位并加transform过渡；状态通过:checked+.slider控制，避免display:none导致点击失效，确保触控热区充足且动画平滑。
-
performance.measure的两个参数必须都已存在，否则静默失败；常见漏打场景包括快速连点、钩子中DOM未就绪、路由跳转mark覆盖；验证需用console.assert检查mark是否存在；“渲染完成”应检测真实DOM内容或LCP，而非仅依赖生命周期钩子；上报须节流、抽样、清理。
-
为HTML标签组添加可访问性的核心在于优先使用语义化HTML5元素，结合ARIA属性进行补充，并确保键盘导航和焦点管理得当。1.优先使用原生语义化HTML元素，如<fieldset>、<legend>、<nav>、<ul>、<ol>等，以提供默认的语义和行为；2.在原生HTML不足以表达复杂组件时，合理使用WAI-ARIA的角色和属性，如role、aria-labelledby、aria-describedby、aria-expanded等，以增
-
float无法实现垂直底部对齐，因其仅支持left/right水平浮动；需用position:relative+bottom计算偏移，或更优解——改用Flexbox的align-items:flex-end。
-
fr单位本质是“剩余空间的份数”，仅分配减去固定值后的空间；混用时需用minmax()防撑宽，auto-fit+minmax()可实现响应式均分。
-
padding-block是按writing-mode动态映射块方向内边距的逻辑属性，非简单替代padding-top/bottom；其start/end端映射取决于书写模式，如horizontal-tb下对应上下，vertical-rl下对应左右，未设writing-mode时行为等同物理属性但语义不同。
-
用relative是为让按钮保留在文档流中并作为气泡定位参考；气泡不必是直接子元素但强烈推荐，否则易因containingblock变化导致错位；尖角对齐靠伪元素加transform微调；移动端需JS控制显隐，不可单靠:hover。
-
不设width=device-width会导致页面以默认980px虚拟视口渲染，内容缩小、交互失准；其作用是让浏览器按设备物理宽度（如375px）布局，缺失时响应式基础全面失效。
-
display:flex后子元素不等高，是因为align-items:stretch需父容器有明确交叉轴高度且子元素未设height/min-height等覆盖属性，否则拉伸失效。
-
<p>最省事、最稳的方式是加一行CSS：html{scroll-behavior:smooth;}，必须作用于html元素，写在body或*上无效；需排查!important覆盖、目标元素可见性及旧版Safari兼容性问题。</p>
-
移动端轻点触发touchstart后300ms再触发click，导致重复执行；解决核心是让一次点击只触发一个回调：用@touchstart.prevent阻断click，或通过isMoved判断点击/拖动，或兼容PC用click为主、touchstart为辅并preventDefault。
-
::after伪元素清除浮动是最实用且不污染结构的方案，需作用于浮动子元素的直接父容器，且该容器不能是flex/grid布局或已有其他::after规则；content:""不可省略，display:table比block更稳，clear:both强制虚拟块落于浮动元素下方以撑开父容器。
-
纯CSS无法实现真正的Mesh渐变，但可通过多个radial-gradient()叠加、精准定位、rgba透明度控制及伪元素分层模拟苹果UI中的柔和多点径向渐变效果。
-
id必须唯一、class可复用是HTML规范强制要求，影响DOM操作、CSS优先级、可访问性和SEO；重复id会导致getElementById返回首个元素、aria属性失效、锚点跳转不可预测等问题。
-
微信小程序WebSocket连接失败主因是wss域名未在公众平台配置白名单；需单独添加ws子域名、禁用路径、测试版需开启debug；状态判断应以socketTask.readyState为准；心跳必须在onOpen中启动；重连须防抖退避并重置socketTask。
