-
通过独立定义关键帧、协调动画节奏并优化性能，可解决CSS中背景色与文字颜色动画的异常问题，确保两者平滑共存。
-
nth-last-child从最后子元素倒序选中指定位置元素，不区分类型；nth-last-of-type则按标签类型倒序匹配，常用于精准控制同类标签末尾元素样式。
-
call和apply都显式指定函数执行时this的值并立即调用；区别仅在传参方式：call用逗号分隔参数，apply用数组传参。
-
使用position:relative可使元素相对于其原始位置偏移，通过top、left、right、bottom调整位置，且不脱离文档流。1.基本语法为设置position:relative及偏移属性，如top:10px;left:20px;使元素右下移动。2.top和left常用，正值分别向下、向右移动，负值反向；避免同时使用对立属性。3.实际用于微调图标对齐、下拉箭头偏移等。4.注意元素仍占原空间，可能重叠，可结合z-index控制层级，支持百分比值。该方法不破坏布局，是前端常用定位技巧。
-
使用IntersectionObserverAPI实现懒加载，可异步监听元素与视口的交叉状态，在元素进入可视区域时再加载资源。相比传统依赖scroll事件的方式，它由浏览器优化调度，避免频繁重排重绘，提升性能。核心优势包括异步执行、支持阈值控制、可自定义根容器及自动解耦观察逻辑。实现时将真实图片地址存于data-src，当entry.isIntersecting为true时替换src并停止观察。通过rootMargin提前触发加载，threshold控制可见比例，提升用户体验。建议复用observer实例
-
HTML中空格被合并时，可用 、<pre>标签、white-space属性、letter-spacing/word-spacing或<span>加margin-left五种方法精确控制空格显示。
-
npm脚本可以通过以下方式优化JavaScript开发过程：自动化任务：定义在package.json中的脚本可以自动化构建、测试和部署任务，减少手动操作。组合命令：使用&&链接多个命令，如清理目录、构建项目和启动服务器，实现复杂工作流。环境管理：通过环境变量区分开发和生产环境，简化环境切换。跨平台兼容：使用cross-env包确保脚本在不同操作系统上运行一致。错误处理：npm脚本默认在错误时停止执行，确保脚本的可靠性。日志和调试：提供足够的反馈信息，方便问题定位和解决。通过这些方法，npm脚本能显著提升
-
适合纯Grid的页面/模块包括首页布局、数据看板、响应式图片画廊或商品列表；其余如导航栏、表单控件组、按钮组等更适合Flex或Grid+Flex混合使用。
-
使用Prism.js、CodeMirror、Highlight.js或MonacoEditor可实现HTML5源码高亮与编辑。首先通过Prism.js或Highlight.js在pre-code标签中高亮展示代码，其中Prism需指定语言类，Highlight.js支持自动检测；其次嵌入CodeMirror或MonacoEditor提供可编辑环境，CodeMirror轻量易集成，适合基础编辑，Monaco功能强大如VSCode，适用于复杂场景，需异步加载并初始化编辑器实例，结合使用即可实现高亮预览与实时编
-
opacity作用于整个元素及其子元素，使所有内容透明；2.RGBA仅作用于指定颜色如背景色，不影响文字等其他部分；3.推荐背景透明用RGBA，整体淡出用opacity，避免文字模糊。
-
使用记事本编写HTML代码并保存为.html文件，确保类型设为“所有文件”；2.双击文件用浏览器直接打开，即可查看渲染效果；3.修改代码后保存并在浏览器按F5刷新，实现实时预览。
-
TypeScript是JavaScript的超集，通过可选静态类型系统在开发阶段检查类型错误。它支持渐进式采用、JSDoc注释，并提升智能提示、重构安全性和接口文档化能力。
-
JavaScript可通过WebSpeechAPI的SpeechSynthesis接口实现浏览器端语音合成，需检测support、处理音色加载延迟、设置参数并调用speak，注意移动端需用户手势触发且存在兼容性限制。
-
弹性盒子中文字换行不规则主因是容器未控溢出与换行、flex-basis设置不当；应设overflow-wrap:break-word、flex-basis:0、min-width:0，并避免white-space:nowrap等干扰样式。
-
外边距（margin）对绝对定位元素并非无效，而是不参与定位偏移计算；其作用限于盒内间距、背景起始位置及margin合并等，真正控制位置的是top/right/bottom/left属性。
