-
用<dialog>+radio实现可选优惠券弹窗：支持多券单选、选中反馈、关闭保留状态、表单联动；关键是在close事件中即时获取:checked值，用<label>包裹<inputtype="radio">确保语义与交互正确。
-
闭包封装数据、监听器和渲染函数实现状态监听与自动渲染，通过Proxy拦截get/set完成依赖收集与触发更新，并提供onUpdate/offUpdate支持动态注册与清理，防止内存泄漏。
-
Less中写媒体查询需用&显式绑定父选择器，如.nav{@media(max-width:768px){&{display:none;}}}；避免深层嵌套、冗余循环和无效组合，合理拆分文件并使用变量管理断点与移动端样式。
-
微前端通过按路由拆分子应用，选用qiankun实现隔离与通信，主应用统一管理依赖与状态，提升系统可维护性与团队协作效率。
-
Tailwind默认不支持mix-blend-mode类，需通过@layerutilities手动注入；bg-black/50无法参与混合，因background-color不构成可混合的背景层；全屏视频+遮罩+文字必须严格分三层：视频层、多背景层遮罩（如渐变）、独立文字层，并确保stackingcontext、z-index和isolation设置正确。
-
<p>calc(100vw-17px)不可靠因滚动条宽度动态变化，应改用JS获取真实宽度注入CSS变量，或优先使用width:100%替代。</p>
-
用:not(.target)最安全，但括号内仅限单个简单选择器；语法错误（如:not(.a.b)）会导致整条规则被浏览器丢弃；排除多个类需链式写:not():not()，且:not()仅作用于目标元素自身，不涉及祖先或后代。
-
使用requestAnimationFrame同步渲染，减少重绘区域，利用离屏Canvas预渲染复杂图形，分层绘制，对象池复用对象，控制帧率平衡性能。
-
优先用getElementById和querySelector；避免getElementsByClassName实时集合开销；批量操作用DocumentFragment；事件委托优于遍历绑定；缓存布局信息或用IntersectionObserver。
-
content="5" 表示等待 5 秒后跳转。url=https://www.example">
实现页面跳转和自动重定向的核心方式有以下几种：1.使用<a>标签实现用户点击跳转，通过href指定目标URL，target控制打开位置；2.利用<metahttp-equiv="refresh">实现HTML自动重定向，可在指定时间后跳转，适用于简单静态页面的临时跳转，但存在用户体验差、SEO不友好、可能造成后退循环等问题；3.采用JavaScript的window.location对象进行重定向，其中href和assign会保留历史记录，replace则替换当前记录，避免用户后退
-
button内直接放SVG图标可能触发点击区域异常，因SVG默认pointer-events为auto且vertical-align为baseline，易导致空白区不可点或图标偏移；应设pointer-events:none和vertical-align:middle，并确保无障碍属性完整。
-
本文详解如何通过设置animation-timing-function（如linear）消除动画过程中的突兀停顿，使水滴下落、旋转等关键帧动画真正平滑连贯。
-
实现HTML页面内容居中显示的核心方法有三种：margin:auto、Flexbox和CSSGrid；2.margin:auto适用于块级元素的水平居中，需设置元素宽度且仅支持水平方向；3.Flexbox通过在父容器设置display:flex、justify-content:center和align-items:center，可同时实现水平和垂直居中，适合一维布局；4.CSSGrid通过display:grid和place-items:center属性，简洁实现二维居中，更适合复杂多维布局；5.对于同时
-
BootstrapModal不居中通常因外部样式干扰、父容器限制或自定义类破坏flex布局；应确保结构规范、避免覆盖居中样式，优先使用modal-dialog-centered类，复杂场景可手动添加d-flex、align-items-center和justify-content-center。
-
indent-8不起作用是因为TailwindCSS默认不提供text-indent工具类，需通过自定义配置（如theme.extend.textIndent+插件）或内联样式等方式手动启用。
