-
答案是使用Three.js创建交互式3D场景需构建场景、相机、渲染器，添加物体与灯光，通过动画循环和Raycaster实现交互；性能优化包括减少DrawCalls、LOD、纹理压缩、控制后处理及WebWorker计算；用户交互通过Raycaster将鼠标坐标映射为3D空间射线检测相交物体，实现点击与拖拽；外部模型常用GLTF格式加载，配合AnimationMixer和AnimationAction控制动画播放。
-
PWA支持离线使用，核心是注册ServiceWorker并配置缓存策略；需在sw.js中预缓存静态资源、拦截fetch请求，HTML采用网络优先+缓存回退策略；配合WebAppManifest实现安装与全屏体验；健壮离线还需IndexedDB存储结构化数据。
-
所有文字大小调整都落在font-size这一个CSS属性上，HTML标签本身不带默认像素值，只带浏览器预设相对比例；精确控制必须写CSS，推荐使用rem/em适配响应式，避免依赖UA样式。
-
用Flexbox实现三栏响应式布局需设main为flex容器，主内容flex:1自适应，侧边栏固定宽；小屏用flex-direction:column切换单列；卡片间距用padding或gap替代margin塌陷；导航焦点用:focus-visible加outline保障可访问性；字体优先系统栈，避免闪动。
-
JavaScript国际化核心是分离语言资源、动态加载文案、统一管理语言状态；推荐i18next库，也支持手动实现轻量切换，并需同步HTMLlang属性及CSS适配，大项目宜按需加载语言包。
-
应使用<link>引入公共CSS文件并置于页面专属样式之前，禁用@import，通过CSS自定义属性实现轻量配置，构建阶段用CSSModules或提取插件确保样式唯一打包。
-
父元素的overflow属性决定动画子元素溢出时的显示效果：visible完全可见，hidden裁剪溢出部分，常用于滑入滑出动画；使用transform时因不改变布局流，overflow可能不生效，建议用包裹容器控制；注意阴影被裁剪、层级错乱和移动端性能问题，可通过子元素分离特效、调整z-index或替代方案解决。
-
确保客户端与服务端HTML结构一致，避免因环境差异导致重新渲染；2.通过async/await预取数据并注入初始状态，保证数据同步；3.使用hydrate而非render进行事件绑定，确保交互正常；4.服务端提取样式并内联，防止客户端重排重绘。
-
通过CSSFlexbox的align-items:stretch特性，可让同级卡片自动拉伸至容器内最高卡片的高度，无需固定高度或JavaScript计算，简洁高效地实现响应式等高布局。
-
使用CSS:hover伪类可为按钮添加悬停效果，提升交互体验。通过改变背景色、文字颜色、边框、阴影并结合transition实现平滑动画，如示例中按钮背景变深、边框加暗、添加阴影和轻微上移。需注意兼容性，避免在悬停中触发关键功能，控制过渡时间在0.1～0.3秒，保持颜色对比度，防止大幅位移影响页面稳定性。
-
移动端表单体验优化需重点解决间距过紧、输入框过矮、点击区域过小问题：输入框设height:44px、padding:12px16px、font-size:16px并加box-sizing:border-box；表单项间设margin-bottom:20px，label与input间留8px；自定义控件用label包裹并设padding扩大点击区；统一font-family和font-size，加-webkit-text-size-adjust:100%防缩放。
-
仅靠CSSborder无法画出标准菱形，因其本质是直角三角形拼合；可靠方案是用等宽高等的元素配合transform:rotate(45deg)或clip-path:polygon(50%0%,100%50%,50%100%,0%50%)。
-
HTML5video标签默认点击不播放，需JavaScript监听click并调用play()；须加muted属性、处理Promise拒绝、移动端注意手势时效与CORS配置。
-
React通过批处理（Batching）机制确保多次快速状态更新能正确累加，避免因闭包捕获过期state导致的计数丢失问题。
-
fr是CSSGrid中专用于分配剩余可用空间的弹性单位，先扣除固定尺寸和gap，再按比例分割剩余空间；它不是像素、百分比或em，不表示绝对长度，也不依赖父容器尺寸的百分比计算。
