-
答案：CSS的@keyframes规则用于创建自定义动画，通过定义0%、50%、100%等关键帧控制样式变化，如slideIn实现元素从左滑入并淡入；可用from/to替代0%/100%简化语法，如fadeIn实现透明度过渡；通过animation属性将动画绑定到元素，可设置持续时间、速度曲线、延迟、次数和方向，支持简写形式；可通过添加中间帧实现复杂效果，如bounce弹跳动画；建议仅动画transform和opacity以提升性能，避免触发布局重排，并结合will-change优化渲染，移动端需控制动画
-
ul横排应设li为flex或inline-block；推荐ul设display:flex、list-style:none、无边距，li设margin；inline-block间隙由空白符引起，可用font-size:0解决；小屏横滚需外层div加overflow-x:auto并处理滚动条。
-
JavaScriptCanvas绘图需先获取2D上下文，再按步骤绘制矩形或路径图形，并预先设置样式；所有操作须在DOM加载后执行，且注意上下文有效性与状态管理。
-
网站分享到Discord、Facebook、Twitter等平台时无缩略图和描述？根本原因是缺少OpenGraph（OG）元标签——本文详解如何正确添加og:title、og:description、og:image等关键标签，并提供可直接部署的代码模板与调试要点。
-
强制保持16:9宽高比需用padding-top:56.25%配合绝对定位；移动端自动播放须加?autoplay=1&mute=1并配置完整allow权限；Flex布局中iframe塌陷应设flex-shrink:0；优化加载须用loading="lazy"或IntersectionObserver懒加载。
-
箭头函数不绑定自身this，而是继承外层作用域的this值；它用=>定义，无arguments、prototype、super和new.target，不能作为构造函数。
-
应使用rgba()或hsla()设置背景透明度，而非opacity属性；因opacity会使整个元素（含文字、子元素）统一变透明且不可逆，而rgba()仅作用于背景色，可确保文字保持100%不透明。
-
用position:fixed+transform居中是最稳妥的方案，需同时设置left:50%、top:50%和transform:translate(-50%,-50%)，因transform的50%基于自身宽高，不受视口尺寸影响，兼容IE9+，且响应式宽度下仍精准居中。
-
AsyncIterator是JavaScript中用于异步生成值的迭代器协议，其next()方法必须返回Promise<{value,done}>；而普通Iterator的next()同步返回{value,done}，因此AsyncIterator需用forawait...of遍历。
-
响应式排版与文字换行的核心在于灵活布局与可读性优化。通过“移动优先”的媒体查询策略，结合Flexbox处理一维对齐、Grid构建二维页面结构，并使用相对单位（如rem、vw）实现流体布局；文字换行则依赖overflow-wrap:break-word防止溢出，text-overflow:ellipsis实现单行省略，辅以clamp()函数动态调整字体大小，提升多设备下的阅读体验。
-
Magic.css动画在Chrome不触发的根本原因是元素初始即处于终态，浏览器跳过动画；需确保可见、无动画类，并用requestAnimationFrame延迟添加class，避免与transition混用。
-
WebAudioAPI的play()不支持混音，必须用AudioContext搭建路由，通过GainNode等节点处理信号；HTMLMediaElement仅适合单轨播放，AudioBufferSourceNode才是混音基础。
-
本文介绍如何通过CSSGrid的grid-auto-rows与display:grid布局，强制同一行中所有日期卡片（.card）保持统一高度，彻底解决因内容长度不一（如长文本、多行训练计划）导致的视觉参差问题。
-
grid-auto-rows仅定义自动创建的网格行轨道尺寸，不响应内容高度变化；它影响整行所有单元格，无法让每个单元格独立适应内容，正确做法是结合align-items或min-content等属性。
-
WebTransport基于QUIC与UDP，提供低延迟、多模式传输，适用于实时通信场景。1.理解其可靠流、不可靠datagram及0-RTT握手机制；2.选用Rust/quinn或Node.js库构建服务端；3.设计会话管理、消息路由与混合传输策略；4.前端通过WebTransportAPI连接并降级兼容WebSocket。核心在于融合高效、安全与易用性，推动实时Web演进。
