-
响应式表格在小屏上应优先采用横向滚动而非缩放；通过父容器设overflow-x:auto和table设min-width实现基础兼容，中大屏再用媒体查询配合百分比列宽与white-space控制布局。
-
Flexbox的gap属性直到2021年才被主流浏览器稳定支持，IE完全不支持，旧版Safari存在部分识别但不渲染的问题；gap定义相邻元素间隙，justify-content定义整体对齐关系，二者混用会导致布局失控。
-
本文深入分析React中因组件生命周期和状态更新机制理解偏差导致的UI不更新问题，重点讲解componentDidMount仅执行一次的特性如何引发“状态已变但视图未更新”的典型陷阱，并提供基于函数组件、useEffect和受控状态的现代解决方案。
-
用setInterval+HSL随机色相（0–360）配固定饱和度70%、明度85%实现柔和背景切换，间隔3000–8000ms，添加鼠标悬停暂停、卸载前清除定时器，并预设CSStransition确保淡入淡出生效。
-
最直接的写法是用background-image:linear-gradient()给body或容器设渐变背景；需配background-color降级，避免用background简写覆盖，并注意浏览器兼容性与移动端渲染问题。
-
CSSGrid实现复杂页头需在header容器设display:grid和grid-template-areas（带引号多行声明），子元素grid-area值须严格匹配；响应式需重写entireareas；吸顶用position:sticky于子行而非整个header；box-sizing:border-box必须统一。
-
HTML表单无法直接获取视线轨迹，需用mousemove、focus/blur、scroll等代理信号推测注意力；应避免误用IntersectionObserver，聚焦字段级行为链聚合与合理埋点。
-
HTML无法直接扫码，需用JavaScript调用摄像头：通过navigator.mediaDevices.getUserMedia获取视频流，用jsQR等库逐帧解码二维码；须控制帧率、适配分辨率、及时关闭媒体轨道，并确保HTTPS环境与权限处理。
-
auto-fit只创建有内容的轨道并拉伸填满容器，auto-fill则无论内容多少都按minmax()尽可能预留全部轨道，导致空列和布局错位。
-
正确引用外部CSS需根据HTML与CSS文件的相对位置使用路径。同一目录用href="style.css"，子目录用href="css/style.css"，上级目录用href="../style.css"，多级跳转如href="../../assets/css/main.css"；注意大小写敏感、使用正斜杠/、避免以/开头导致根路径误用，并通过开发者工具Network面板验证加载情况。
-
shortcuts字段必须是顶层非空数组，每项须含name和url（相对路径），且url需符合scope范围；Android要求显式配置icons，否则显示空白。
-
根本原因是移动端浏览器地址栏收放导致vh动态变化，应改用min-height:100vh+height:100%、JS同步--vh变量、监听resize/orientationchange事件并防抖处理，确保全屏体验稳定。
-
JIT优化不是“一劳永逸”因为其依赖的运行时推测信息可能失效，一旦假设被违反（如类型变化、类加载、虚方法目标变更等），必须执行去优化（deoptimization）回退到解释执行。
-
font-display:swap需配合preload、font-size-adjust和min-height容器兜底才能缓解移动端CLS，单独使用反而加剧布局跳动。
-
优先用grid-column和grid-row手动控制每个格子的起止线；grid-template-areas仅适用于语义固定、命名稳定的布局场景。
