-
根本原因是viewportmeta标签缺失或错误，导致移动端按虚拟视口渲染，媒体查询不触发；需添加<metaname="viewport"content="width=device-width,initial-scale=1.0">并避免固定宽度值。
-
直接触发BFC可解决非浮动元素被浮动元素遮挡问题：给被遮挡元素加overflow:hidden或display:flow-root，使其避开浮动区域；overflow:visible不触发BFC，且避免滥用overflow:hidden导致弹窗裁剪。
-
HTML无法实现任务依赖逻辑，必须用JavaScript控制状态同步；通过data-prereq标记依赖项，监听change等事件更新下游节点状态，并确保可访问性与用户提示。
-
grid-template-columns用于定义网格列的大小和分布，支持固定值、百分比、fr弹性单位、auto及minmax()等；通过fr可实现响应式布局，repeat()简化重复列定义，minmax()设定列宽范围，组合使用可高效构建复杂网格布局。
-
小屏单列堆叠、大屏左右对称需切换布局模型：小屏用flex-direction:column或grid-auto-flow:row，大屏用grid-template-columns:1fr1fr或双flex容器，配合grid-column/order或JS奇偶分配，并通过grid-auto-rows/min-height保障视觉平衡。
-
SharedArrayBuffer是JavaScript中支持多线程共享内存的ArrayBuffer，需配合Atomics实现原子操作以避免竞态；仅在跨域隔离（COOP+COEP）环境下可用，且必须通过postMessage传输并列入transferlist。
-
闭包通过封装资源获取、使用和清理逻辑实现可控的生命周期管理。它支持显式.destroy()与环境兜底双机制，约束引用范围防泄漏，并提供可组合的钩子链式注册以保障多资源有序初始化与销毁。
-
JavaScript前端无法直接生成PDF，但可用jsPDF（适合绘图/票据）、pdfmake（适合数据驱动排版）、html2pdf.js（HTML区块转PDF）或Puppeteer（服务端高保真）实现；需注意中文字体、内存限制及加密等高级功能须后端支持。
-
边框默认占用额外空间是因为content-box模型下width/height仅含内容区，padding和border会额外增加尺寸；改用box-sizing:border-box可使设定宽高包含padding和border，内容区自动收缩，margin不受影响。
-
selection.toString()返回空字符串主因是事件时机不当或上下文错误：mouseup后焦点丢失、iframe/contenteditable未切换文档、rangeCount为0；需防抖、校验单range、限定语义块并同步读取。
-
opacity动画需显式声明transition或animation才能生效，@keyframes必须明确起止值0和1，配合forwards填充模式及visibility:hidden实现真正淡出。
-
背景被border裁切是因默认background-clip:content-box；应设background-clip:border-box，配合background-origin:border-box解决偏移，圆角需同步设border-radius；兼容问题可改用box-shadow或padding模拟边框。
-
hr默认样式跨浏览器不一致：IE用color设色，Firefox/Safari需background-color，Opera还需height；须同时设border:none、height:1px、color与background-color同值才能统一渲染。
-
及时断开无用引用是提升Python、Java/.NET等GC效率的关键，需重点清理缓存过期条目、未反注册监听器、静态集合引用、内部类隐式引用，并在销毁方法中集中处理，结合语言特性如WeakHashMap、IDisposable等协同优化。
-
纯CSS实现Tab切换不能仅靠float，因其仅为布局属性，无法响应交互或控制显隐；真正生效的是:checked、:target等伪类配合HTML结构实现状态切换。
