-
结论：用height:100vh搭配grid-template-rows:60px1fr50px能稳定实现全屏布局，但需确保html、body{height:100%;margin:0}且容器无干扰fr的样式；因fr分配的是容器内剩余空间，非视口高度，若容器未真正占满屏幕或存在margin/padding/border，1fr即无法铺满。
-
在HTML中为图片添加圆角效果，使用CSS的border-radius属性。1.在<img>标签上应用内联样式，如<imgsrc="example.jpg"alt="ExampleImage"style="border-radius:10px;">。2.在样式表中定义类，如.rounded-image{border-radius:15px;}，然后在HTML中使用class="rounded-image"。
-
video标签中添加track元素需满足：必须为video直接子元素；kind="subtitles"；srclang为合法BCP47码（如"zh"）；VTT文件首行为WEBVTT且UTF-8无BOM；JS切换字幕需设track.mode为"showing"/"disabled"。
-
根本原因是没设backface-visibility:hidden；必须给正面和背面子元素均添加该属性并配合父容器设置perspective，同时移动端需用JS控制翻转状态。
-
HTML页面直接分享到社交平台默认不携带标题、描述、缩略图，因主流App依赖服务端返回的含绝对URL的OpenGraph/TwitterCardmeta标签，且需静态或SSR页面、微信对图片有尺寸和直连要求；SPA须用SSR或预渲染解决，纯前端仅微信可用JS-SDK补救。
-
HTML乱码根源在于<metacharset>声明与文件实际编码不一致，必须严格匹配；还需确保HTTP响应头、编辑器保存编码、Git及CDN等全链路统一为UTF-8。
-
必须用if/else而非switch的情况包括：数值范围判断（如score>=90）、关系运算（>、<、!=等）、布尔表达式、不同类型操作数比较、运行时计算值匹配——switch仅支持同一变量的离散等值匹配。
-
必须加-webkit-前缀才能生效，因Safari、旧Chrome及iOS/macOS系统仅支持-webkit-background-clip:text和-webkit-text-fill-color:transparent，且Firefox110+才开始支持标准属性。
-
Chrome和Safari中清除按钮需用::-webkit-search-cancel-button配合-webkit-appearance:none等样式隐藏，仅appearance:none或opacity:0不兼容；Firefox不支持该伪元素；隐藏后仍可通过快捷键清空，彻底禁用需JavaScript拦截。
-
vertical-align仅对inline、inline-block、table-cell元素生效，作用于行内格式化上下文中的基线对齐，非容器级垂直居中工具；设在块级元素上被忽略，对齐基准是line-height生成的行内框中线，非父容器中心。
-
最简实现是用onclick修改img的src，配合图片数组和取模索引轮转；多图区域应改用data-index绑定状态；切换时需用transitionend事件控制淡入淡出；加载失败须先清onerror再设备用图。
-
手动实现简易Promise需支持三种状态、链式调用与值穿透：构造函数管理pending/fulfilled/rejected状态及回调队列；.then返回新Promise并兼容同步异步；.catch是.then(undefined,onRejected)语法糖；resolvePromise处理返回值解析，含微任务调度、循环引用检测等细节。
-
用addEventListener绑定点击事件，通过添加/移除class触发CSS@keyframes动画最轻量兼容；需确保DOM加载完成、声明animation-duration和animation-fill-mode:forwards，并用animationend清理class防重复触发。
-
CSSanimation与filter结合可实现图片动态特效。1.filter支持亮度、对比度、模糊等效果，可组合使用；2.通过transition实现hover时滤镜变化，如黑白变彩色；3.利用@keyframes创建循环动画，如色相旋转营造呼吸感；4.高级组合如模糊与亮度脉动模拟加载状态，适用于占位图激活提示。合理控制频率并优化性能，避免过度消耗帧率。
-
fr是CSSGrid中用于分配剩余空间的弹性单位，表示份数比例，常用于grid-template-columns或grid-template-rows；例如1fr2fr1fr将容器按1:2:1划分，第二列宽度为其他两列的两倍；可与px等固定单位混合使用，此时fr分配扣除固定宽度后的剩余空间；典型应用包括侧边栏固定主内容自适应、等分布局如repeat(3,1fr)，以及配合minmax实现响应式网格；fr仅在Grid布局中有效，且只作用于剩余空间。
