-
web-vitals是JavaScript库，非HTML标签或属性，需通过脚本调用onLCP/onCLS/onINP等函数采集指标；仅引入script不调用函数将无法获取数据，且须注意执行时机、buffered配置及手动上报逻辑。
-
本文详解如何在JavaScript中为可缩放/可拖拽图像设置精确的平移边界，确保无论缩放级别高低，图像始终不超出容器可视区域，重点修正原逻辑中因坐标系混淆导致的边界失效问题。
-
align-items:stretch会强制子元素在交叉轴上拉伸填满，导致正方形变形；应设flex-shrink:0、min-height替代height或改用align-items:flex-start等值来守住正方形。
-
Node.js通过文件扩展名、package.json的"type"字段和import()动态导入识别模块类型：".mjs"强制ESM，".cjs"强制CommonJS，"type":"module"使.js按ESM解析；ESM可importCommonJS但仅限default，CommonJS需用import()异步加载ESM。
-
JavaScript事件处理是受单线程、事件队列、冒泡/捕获、任务优先级约束的响应系统；onclick赋值会覆盖，addEventListener支持叠加；事件委托可监听动态元素；高频事件需节流；Promise.then比setTimeout(0)更早执行。
-
在Mac上运行HTML文件只需用浏览器打开即可。找到以.html结尾的文件，双击用Safari打开，或右键选择Chrome等浏览器预览；也可通过终端输入open-a命令指定浏览器启动；借助Spotlight或Finder搜索可快速定位文件；建议使用VSCode等编辑器编写并保存为.html格式后直接双击预览，修改后刷新浏览器即可见效。
-
最推荐用classList控制预定义类，其次用CSS变量配合setProperty；直接改element.style仅适用于极少数实时场景。它仅覆盖内联样式、需驼峰命名、单位不可省略，且无法覆盖!important或触发重排优化。
-
Symbol是JavaScript的原始类型，用于创建唯一值，常作对象属性键以避免命名冲突。
-
本文讲解如何在JavaScript中精准控制样式作用范围，避免误操作（如遮罩层连同弹窗一起变暗），通过DOM结构优化和元素隔离替代CSS:not()的逻辑，实现仅对背景内容应用滤镜效果。
-
完全可行且推荐，Grid负责整体区域划分，Flexbox处理区域内子元素对齐与排列，二者职责分明、协同高效。
-
垂直菜单需设flex-direction:column，配合justify-content（space-between/space-around/space-evenly）实现不同“均匀”效果，并用align-items:center水平居中，优先min-height防溢出。
-
WebSocket需服务端配合、状态管理、错误重连和协议设计；常见问题包括URL协议错误（须用ws/wss）、连接拒绝、关闭异常及JSON序列化要求；应检查readyState、实现心跳与指数退避重连，并重视消息ID与离线队列。
-
SPA路由切换CSS动画不触发，主因是组件卸载重建导致DOM节点丢失、定位上下文断裂、transition类名不匹配或key未正确更新；需保留DOM、显式设position:relative、完整定义6个过渡类、用location.pathname作key并确保钩子时机恰当。
-
利用CSS的:focus与::after伪元素可实现输入框聚焦时的提示效果；2.推荐使用父容器结合:focus-within与::after显示提示内容；3.也可通过相邻兄弟选择器使聚焦后兄弟元素显示提示；4.注意定位、层级及移动端适配，复杂场景仍需JavaScript。
-
本文详解如何通过position:absolute与z-index组合，让点击<summary>展开的<details>内容层叠于其他卡片之上，解决默认流式布局中内容撑开、遮挡错位的问题。
