-
Vue.js的provide/inject适合中后台权限注入，因其匹配权限“启动即确定、全应用使用、不频繁变更”的特点；需在根组件用reactive包裹权限数据并provide，子组件inject后可响应式使用。
-
IntersectionObserverAPI可高效实现懒加载和无限滚动，提升页面性能。通过监听图片进入视口时加载真实地址，减少初始请求；利用哨兵元素触发异步加载更多内容，避免频繁计算。配合阈值、根容器设置及卸载监听优化体验，并注意兼容性处理。
-
radio按钮不互斥因name属性不一致；label未绑定导致点击文字无效；默认选中用checked而非defaultChecked；获取值应直接查:checked伪类并判空。
-
卡片整个区域应响应点击，但默认仅文字可点，需通过display:block、负margin抵消、伪元素扩展或min-width/min-height等方案确保热区≥44×44px并经真机验证。
-
仅添加required属性不足以触发浏览器原生验证，必须将输入控件包裹在<form>标签内并使用语义化提交机制，否则浏览器无法识别表单上下文，导致空提交仍被允许。
-
JavaScript模块化从AMD、CommonJS到ESModules演进，解决了浏览器异步加载、服务端同步引用及跨平台统一问题，最终ESM成为原生标准，支持静态分析、tree-shaking与动态导入，推动现代前端工程化发展。
-
使用position:fixed结合Flex布局可实现模态框居中，通过.modal-overlay设置固定定位与flex对齐，.modal-content定义样式，HTML结构嵌套内外层，JavaScript控制显示隐藏，兼顾兼容性与响应式。
-
使用Flexbox实现多列等宽布局最简单，通过设置容器display:flex和子项flex-basis:0、flex-grow:1，可让所有列均分容器宽度。flex-basis设为0使项目从零宽度开始，忽略内容大小差异，flex-grow:1确保剩余空间按比例平均分配。例如三列布局中，即使内容不一，各列仍严格等宽，保持视觉平衡。结合边框、内边距等样式，即可快速构建简洁整齐的响应式多列结构。
-
箭头函数在对象方法中会导致this指向外层作用域而非当前对象，因其无自有this绑定；应改用普通函数或显式bind。
-
Grid布局中grid-template-areas怎么写才不踩坑用grid-template-areas命名区域看似直观，但实际写错一个引号、多一个空格、漏掉点号占位，整个布局就失效——浏览器不会报错，只会默默回退到默认流式排版。它本质是字符串映射，每一行代表一行网格轨道，每个单词对应一个grid-area值，点号.表示空单元格。必须严格对齐列数，否则解析失败。所有行的列数必须一致：比如第一行写了"headerheadersidebar"（3列），后面每行也得是3个词或.区域名不能含空格或
-
使用@keyframes定义动画帧，结合transform的translateY和scaleY实现图标弹跳效果。通过设置多个关键帧模拟下落、触地压缩与回弹过程，如0%到40%下落，45%挤压，55%反弹，70%恢复，80%小幅度二次回弹，100%稳定。为增强真实感，加入垂直位移与Y轴缩放变形。将动画绑定至.icon元素，设置animation:bouncy-icon1sease-in-outinfinite，可控制时长、缓动函数与循环次数。:hover或.active状态可触发非循环动画，调整参数使动作自
-
使用Node.js和commander等库可创建CLI工具，通过解析命令行参数、执行系统操作（如git、npm）和文件处理实现自动化工作流，例如构建、部署项目，提升开发效率。
-
Flex容器子元素侧轴未撑满，主因是align-items:stretch被覆盖或失效；需确保父容器为flex、子元素无固定宽高及align-self覆盖，且替换元素设height:auto等。
-
答案是利用HTML5拖放API实现拖拽排序，通过设置draggable属性和监听dragstart、dragover、drop事件控制元素移动，结合CSS提升交互反馈。
-
纯HTML简历应使用语义化标签（如<section><time><address>），禁用CSS框架和内联样式，仅用<style>块控制基础排版；确保ATS可解析、打印稳定、移动端适配，内容精炼聚焦一页。
