-
clear:both失效是因为它只清除同级相邻浮动元素，无法影响父级浮动容器；真正有效的是让后续元素创建新BFC，如display:flow-root或overflow:hidden。
-
用@mixin统一控制菜单项状态最可靠，通过变量定义过渡、混合宏封装hover/focus/active样式，并用@if处理focus-visible；&嵌套确保选择器精准，响应式@media宜嵌套在模块内，可访问性需结构与JS协同。
-
将记事本中的HTML代码保存为.html文件后，通过浏览器打开即可查看网页效果。1、编写代码后点击“文件”→“另存为”，设置保存类型为“所有文件”，文件名输入如“index.html”。2、选择保存位置（如桌面）并点击保存。3、双击该文件或右键选择浏览器打开，可查看页面效果。4、若需修改，右键文件选择“编辑”用记事本打开，修改后保存并刷新浏览器。5、确保代码包含<!DOCTYPEhtml>、<html>、<head>、<body>等基本结构，标签成对出现，符
-
虚拟列表不能用display:none切换元素，因浏览器仍会为所有隐藏元素计算布局、生成渲染树，导致内存暴涨和卡顿；其核心是“不创建”而非“隐藏”，只渲染视口及缓冲区节点，DOM节点数应控制在20–100个以内。
-
Vue.js中监听视频进度需用timeupdate事件更新响应式变量再watch，配合防抖（拖动后3秒）与节流（每15秒）上传，辅以localStorage缓存、失败重试、幂等设计及seeked/ended/visibilitychange等状态一致性处理。
-
用<table>制作多商品参数对比表最稳妥，因其语义准确、无障碍友好、响应式与打印表现佳；须用<thead>+<th>表头、scope属性明确行列关系，并通过max-width、text-overflow和word-break控制长文本，小屏改用垂直卡片布局，禁用border-collapse:collapse而用border-spacing分隔商品。
-
play()不提供播放进度，需通过currentTime属性获取；必须等待canplay等事件后再读取或设置，推荐用timeupdate事件监听而非setInterval；设置失败多因媒体未就绪或策略限制。
-
watch适合监听WebSocket状态更新UI，但不可用于心跳与重连——心跳需独立定时器驱动，重连应封装为函数由watch触发；所有定时器和连接须在onBeforeUnmount中显式清理。
-
应直接用localStorage.setItem('theme','dark')存字符串，页面加载时立即读取并设document.documentElement.className，切换时实时写入；注意iOS隐私模式等场景需try/catch捕获SecurityError，并fallback到prefers-color-scheme。
-
Poseidon主题中HTML图片默认不居中，因其将img设为display:block并施加强CSS约束；应优先用Flex容器控制对齐，避免依赖vertical-align，并注意line-height、object-fit等细节影响。
-
margin-top和margin-bottom用于控制元素垂直间距，分别设置上、下外边距，常用于标题、段落等元素间留白；需注意块级元素间外边距合并现象，即相邻上下外边距取较大值而非相加，可通过统一使用margin-bottom、添加边框或设置overflow:hidden避免；推荐使用rem/em单位并保持方向一致性以提升布局可控性与响应性。
-
CSP不是XSS替代品，而是限制已存在XSS影响范围的策略层防线；必须配合服务端输出编码、禁用unsafe-inline/eval、合理使用nonce与strict-dynamic才能有效防御。
-
outline不占布局空间而border会，这是误用根源；outline仅用于焦点提示等纯视觉场景，不可控形状且不参与事件，需用box-shadow或border替代以满足可访问性与设计需求。
-
本文详解为何为元素同时设置display:inline-block和display:grid会引发布局异常（如看似“存在右外边距”实则因display覆盖导致换行），并提供两种专业级修复方案：精简CSS逻辑或重构DOM+Flex布局。
-
最直接有效的JavaScript调试方式是结合浏览器DevTools断点调试、console高级用法、debugger语句及VSCode集成调试；核心在于Sources面板设断点，善用console.table/group/time/trace，条件断点与debugger配合，再通过VSCode实现源码级调试。
