-
标题不跨列是因为父容器未定义grid-template-columns，导致-1指向隐式网格末尾而非预期最后一列；必须显式设置列轨道，如repeat(3,1fr)，此时-1才指向第4条线。
-
ESLint负责代码逻辑正确性检查，Prettier专注代码格式统一；二者分工明确、不可替代，需通过eslint-config-prettier关闭ESLint格式规则并交由Prettier全权处理格式，同时保留ESLint在语义层的校验能力。
-
padding百分比始终参照父元素contentbox的宽度计算，与高度无关；在flex子项中则参照自身计算宽度，table-cell中被规范禁止使用。
-
HTML压缩通过去除空格、换行、注释等冗余字符减小文件体积，提升网页加载速度和用户体验，并有助于SEO优化。主流方法是使用构建工具（如Webpack配合html-webpack-plugin和html-minifier-terser）在打包时自动压缩，或通过服务器启用Gzip/Brotli传输压缩。需注意避免过度压缩导致布局错乱或脚本失效，应合理配置压缩选项并充分测试，平衡优化收益与维护成本。
-
position:fixed是模态弹窗首选定位方式，因其脱离文档流、固定视口且不受滚动影响；absolute易受父容器transform等属性干扰导致错位。
-
提升Lighthouse评分需优化页面加载速度、图像资源、可交互时间及缓存策略。1.减少关键阻塞、压缩资源、延迟非必要脚本、采用SSR/SSG提升性能。2.使用响应式图片、懒加载和异步解码优化媒体。3.拆分长任务、使用WebWorkers和事件防抖改善TTI与INP。4.配置长效缓存、预连接外部资源、利用ServiceWorker增强加载效率。评分优化应聚焦真实用户体验，结合工具建议持续改进，实现高效稳定的网页表现。
-
背景裁剪不一致源于background-size、background-position与容器宽高比变化的共同作用；统一方案应优先用cover+centercenter，需精控时用百分比定位，禁混用单位，并可用伪元素隔离提升精度。
-
原生title属性可实现基础工具提示，但样式和体验受限；通过data-title结合CSS可自定义外观与动画，支持动态内容展示；引入JavaScript能实现延迟显示、精准定位及异步加载等高级功能，提升交互体验。
-
不规则模块拼接需放弃整行对齐，采用容器隔离、形状适配与位置微调组合策略；以CSSGrid为主干，用grid-template-areas定义区块，clip-path塑形、shape-outside控制边缘咬合，transform微调，配合容器查询实现响应式适配。
-
移动端:active失效主因是浏览器未触发该状态，常见于缺失viewport声明、touchstart中误用preventDefault()、事件流被中断或样式继承不稳定；需结合JS状态管理增强反馈。
-
CSS中逗号分隔选择器是规范语法，表示并列声明而非合并选择器，各选择器独立匹配、权重不叠加，使用时应基于语义一致性而非外观相似性判断。
-
可通过浏览器直接打开HTML文件、使用本地服务器或IDE内置功能查看网页效果。一、保存.html文件后双击用默认浏览器打开；二、右键选择特定浏览器测试兼容性；三、通过Node.js安装http-server启动服务，在localhost:8080访问；四、在VSCode中使用LiveServer扩展实现保存即刷新；五、利用Python内置服务器命令python-mhttp.server8000快速部署并在浏览器查看。
-
事件委托能减少监听器数量是因为DOM事件会向上冒泡，只需在共同父容器监听一次，再通过event.target判断目标元素；适用于动态增删子节点场景，但需选择最近稳定父级而非document，且仅冒泡事件（如click、input）支持，focus/blur等需用focusin/focusout替代。
-
z-index不生效主因是元素未处于同一层叠上下文：父元素设opacity<1、transform等会隐式创建新上下文，使子元素z-index仅在内部生效；需确保同级元素父容器无此类属性且自身z-index为数值。
-
backdrop-filter无法用@keyframes实现平滑动画，因其被CSS规范定义为非可动画属性，Chrome、Safari、Firefox均不支持过渡；可行方案是固定backdrop-filter值，仅对opacity或transform动画。
