-
必须设置viewportmeta标签并配合env()函数处理安全区域。iPhoneSafari默认以980px渲染，需用width=device-width激活响应式；安全区域需用env(safe-area-inset-top/bottom)留白；REM布局应先媒体查询兜底再JS微调，避免首屏错乱。
-
本文详解如何修复Socket.IO在定时任务中无法正常发射事件的问题，核心在于将socket连接监听移出业务逻辑，并维护客户端列表实现可靠广播，避免重复绑定和连接泄漏。
-
display属性通过设置不同值控制元素显示类型和是否显示。1.display:none使元素完全消失且不占空间，display:block或inline可恢复显示；2.可改变元素显示类型，如block、inline、inline-block、flex、grid，用于布局调整；3.结合JavaScript动态修改display值或切换预定义类（如.hidden）实现显示隐藏交互；4.与visibility:hidden不同，后者元素仍占位。display是布局和显示控制的核心属性。
-
ResizeObserver能高效监听DOM元素内容区域尺寸变化，适用于动态调整图表、响应式布局等场景，通过observe监听、unobserve或disconnect停止，避免内存泄漏。
-
float两栏布局核心是让主副栏脱离文档流水平排列，但需处理父容器塌陷和后续元素错位；常见副栏换行因盒模型未重置，应设box-sizing:border-box或calc()；清除浮动推荐伪元素法；现代项目不建议首选，因响应式维护难且后续元素默认绕排。
-
进度条用transition不动的直接原因是未在CSS中声明transition属性；须写transition:width0.3sease，或改用性能更好的transform:scaleX()避免重排。
-
答案：CSS中:hover、:active和:focus伪类结合样式与transition可实现平滑交互反馈，提升用户体验与无障碍访问。首先定义元素默认样式，并通过transition设置过渡效果；然后为:hover添加悬停视觉变化如背景色、阴影或位移；:active模拟按下状态，增强操作确认感；:focus则确保键盘导航用户能清晰识别焦点位置，需避免直接移除outline而无替代方案，推荐使用box-shadow或border提供高对比度焦点指示；最佳实践中强调保持样式一致性、合理设置过渡时间（0.2s
-
FileReader是浏览器提供的用于读取本地文件内容的API，通过结合<inputtype="file">获取用户选择的文件后，使用readAsText、readAsDataURL等方法异步读取文本、图片预览或二进制数据，并在onload回调中处理结果，同时需监听onerror处理异常，适用于文本解析、图片预览等场景。
-
面包屑导航需手动维护而非自动推导，纯静态页中必须通过HTML硬编码或构建脚本注入路径映射，确保每级链接真实有效且语义正确，兼顾SEO、可访问性与用户体验。
-
展开运算符...是JavaScript中对可迭代对象或类数组对象进行逐项取出的操作符；它只在需多个独立值的位置生效，如函数调用、数组/对象字面量中，不可单独使用或在赋值左侧。
-
querySelector方法用于查找文档中第一个匹配指定CSS选择器的元素。其核心特点是“选择器”和“第一个”，若需操作所有匹配项则应使用querySelectorAll；对于不存在的元素，它返回null，因此必须进行空值检查以避免错误；此外，虽然支持复杂选择器，但建议保持简洁以提升可维护性与性能。
-
flex属性三值依次为flex-grow、flex-shrink、flex-basis，不可调换；按比例分配宽度只需设flex-grow，且flex-basis应为0（非auto）以避免内容宽干扰；margin/border会侵占剩余空间，推荐用gap和box-sizing:border-box保障比例准确。
-
:disabled伪类仅对原生可禁用表单元素（button、input等）生效，div/span等通用标签添加disabled属性无效；需确保属性真实透传至合法DOM节点，否则应改用类名控制样式。
-
box-shadow叠太多会卡顿甚至白屏，因每条阴影都需独立模糊、合成与重绘，易致GPU内存溢出或主线程阻塞；单元素建议不超过20条，爆炸效果宜用5–8层+scale动画实现。
-
阴影过重主因是使用不透明纯色，应改用带alpha通道的rgba值（如rgba(0,0,0,0.15)），并配合调整模糊半径、偏移量及颜色倾向以增强自然感和界面呼吸感。
