-
用响应式状态实现全局Socket断线重连提示，核心是封装语义化连接状态对象（connected、reconnecting等），通过ref/provide或Pinia共享，配合Teleport全局提示组件与watchEffect自动驱动重连逻辑和UI更新。
-
用单个<span>实现+→×旋转动画的核心是：通过::before和::after伪元素绘制两条正交线段，设transform-origin:center并分别旋转±45°，配合transition:transform0.3sease-in-out实现平滑切换。
-
padding-top百分比基于父容器宽度计算，用于实现宽高比锁定；需配合height:0、position:absolute等使内容脱离文档流，避免比例失效。
-
RRGGBB最稳妥，全浏览器兼容且无歧义；rgb()/rgba()适合动态计算与透明控制；hsl()/hsla()便于调色逻辑；color()/lab()兼容性差，仅限实验。
-
Map适合非字符串键的有序映射，Set用于去重和存在性检查，WeakMap/WeakSet用于对象键的弱引用场景，普通Object适用于静态配置。
-
答案：控制HTML图片需合理设置尺寸、路径和alt属性。使用width/height属性或CSS控制尺寸，避免失真；通过相对或绝对路径正确引用图片，防止404错误；alt属性提升无障碍访问与SEO，应准确描述图片内容。
-
HTML表单不允许嵌套，浏览器会自动闭合前一个form；应使用fieldset分组、独立form+JS控制或form属性关联控件来替代。
-
动画卡顿常因transition-timing-function选错：ease开头加速猛、结尾减速急，建议小位移用ease-out或cubic-bezier(0.34,1.56,0.64,1)；需确保transition-property和duration同时声明，避免JS内联样式覆盖CSS规则。
-
background-size:cover未生效主因是父容器高度为0；需设min-height:100vh、避免套用限制宽度的.container，并确保元素真正占满视口。
-
下划线需用独立元素（如span）置于导航容器内并绝对定位，通过JS监听mouseenter/mouseleave及touchstart/focus事件，结合getBoundingClientRect计算位置，配合transform和width的transition实现平滑跟随。
-
首屏渲染优化的核心是缩短关键渲染路径，即理清资源依赖、减少阻塞、优先交付关键内容，通过精简关键资源、控制JS执行时机、优化HTML结构及服务端协同实现系统性提速。
-
@use不能直接替代@import因为它默认启用严格命名空间隔离，所有成员必须显式通过命名空间调用，如colors.$primary；而@import是全局合并，易冲突难溯源。
-
使用min-width和max-width可设置容器宽度范围，.sidebar{min-width:200px;}防止过小，.content{max-width:800px;margin:0auto;}限制过宽，结合width:100%实现响应式弹性布局，适配多设备显示效果。
-
Set是JavaScript中用于存储唯一值的集合，可高效实现数组去重。通过展开运算符[...newSet(arr)]能简洁去除原始类型重复元素；处理对象数组时，结合filter与Set记录唯一键（如id），实现O(n)时间复杂度的去重；相比传统方法，Set语法更简洁、性能更优，且无需第三方库。实战中可封装通用函数distinct(arr,key)，兼顾简单数组和对象数组去重，提升代码复用性与可维护性。
-
0fr是合法且更优的隐藏列方式，因其语义清晰、保留轨道结构、兼容动画和响应式切换；但需配套min-width:0、overflow:hidden及子元素宽度约束才能真正生效。
