-
position:absolute会脱离文档流导致父容器高度塌陷，需设position:relative并保留非绝对定位子元素；z-index失效因层叠上下文隔离，应统一管理父容器上下文；移动端right/top错位因box-sizing和单位选择不当；伪元素仅适用于纯装饰内容。
-
Next.js的next/link默认不触发CSSscroll-behavior:smooth，需通过添加!important强制启用HTML根元素的平滑滚动行为，同时确保锚点跳转逻辑正确。
-
:not(:last-child)可精准选中除最后一个子元素外的所有同级元素，基于DOM结构位置判断，动态增删元素时仍可靠，适用于列表、表单等需中间元素加间隔的场景。
-
只有形如#RRGGBB且每组两位十六进制数完全相同时，才能缩写为#RGB，例如#FF6666→#F66；#001不合法，会被解析为#000111；缩写仅支持3位或6位，不支持4位。
-
Sass中无法用map-get($config,'colors.primary')直接取嵌套值，必须逐层调用或封装deep-map-get函数；注意key类型匹配、空值防护及配置结构统一。
-
在HTML中实现PDF预览主要有三种方式：1.使用<iframe>标签，简单直接，兼容性好但控制能力有限；2.使用<embed>或<object>标签，其中<object>支持备用内容提升用户体验，但跨浏览器表现可能不一致；3.使用JavaScript库（如PDF.js），提供高度定制化和功能丰富的预览体验，但实现复杂度较高。为确保最佳体验，应提供下载备用链接、优化文件大小，并注意安全问题，如仅嵌入可信来源的PDF以避免潜在风险。
-
position:sticky是实现导航栏固定的首选方案，需满足设置top值、父容器无overflow截断、页面有足够滚动空间三条件；常见失效源于transform、flex/grid对齐或行内元素未设display；优势是零性能开销、天然平滑、自动响应。
-
剩余参数（...）允许函数接收不定数量实参并自动封装为真数组，必须位于形参末位，可与普通参数共存，替代了arguments类数组对象，支持直接调用数组方法且兼容箭头函数。
-
网页在手机上显示过小，通常是因为缺少viewport元标签；只需在<head>中添加<metaname="viewport"content="width=device-width,initial-scale=1.0">，即可让浏览器按设备真实宽度渲染页面并禁用默认缩放。
-
使用gap属性可解决CSS网格布局中按钮间距不均问题，通过在容器设置gap（如8px）统一控制行列间距，避免使用margin导致的错位与复杂性，实现整齐、响应式布局。
-
答案从基础选择器入手，掌握类与元素样式控制；理解盒模型并使用box-sizing避免布局错乱；采用Flex布局实现常见页面结构；通过语义化命名和模块化组织保持CSS整洁，逐步提升实战能力。
-
在HTML字符串中直接拼接jQuery对象或表达式（如$(...).length）无法自动求值，必须先计算变量再插入字符串，否则显示为原始代码而非实际数值。
-
IndexedDB适合离线应用因支持大容量、异步操作与索引查询，相比localStorage更高效。通过open创建数据库，在onupgradeneeded中建对象仓库和索引，用transaction进行增删改查，需注意事务生命周期与版本控制，建议封装或使用idb库提升开发效率。
-
HTML5可视化编辑器卡顿主因是资源加载策略混乱：未压缩JSON、同步拉取组件库、重复初始化画布引擎、未拆分bundle.js；应采用动态import()按需加载节点、分层初始化画布、禁用eval与SourceMap、启用压缩。
-
使用CSStransition和:hover实现列表项悬停过渡效果更高效，通过设置transition属性可使背景色、文字颜色或位移等变化平滑进行，如配合transform:translateX()增强交互感；若需复杂动画，则可用@keyframes定义关键帧并结合animation属性控制过程，推荐使用cubic-bezier缓动函数提升视觉体验。
