-
JavaScript调试主要依靠浏览器DevTools，核心包括断点调试、控制台交互、实时修改与性能分析；Chrome/Edge按F12打开，关键面板有Console、Sources、Network、Elements等，Firefox功能对等，VSCode可进阶协作调试，实用技巧如console.table、console.group提升效率。
-
根本原因是层叠顺序和源码位置决定最终生效规则，后加载或更具体的样式会覆盖前者；CSSModules仅隔离作用域，不解决语义一致性；真正有效的是语义化命名、单一入口和CSS自定义属性。
-
animation-timing-function控制CSS动画的速度变化，通过预设值如ease、linear或cubic-bezier()自定义贝塞尔曲线，实现自然流畅的动画效果，提升视觉表现力。
-
<p>PostCSS是一个通过插件自动处理CSS兼容性问题的工具，核心插件autoprefixer能根据目标浏览器范围自动添加-webkit-、-moz-等前缀，开发者只需编写标准CSS，构建时即可生成兼容多浏览器的样式代码。</p>
-
flex-wrap:wrap实现自动换行，需配合flex-basis或width控制子项基础宽度，并注意flex-shrink默认值导致的压缩不换行问题及gap兼容性陷阱。
-
transition-property与transition-delay需按顺序一一配对，多值写法中delay仅作用于前一属性；多个transition规则叠加时后声明的property会完全覆盖前者；伪类中delay失效主因是状态过早结束；transform与opacity宜分层控制以避免合成层冲突。
-
通过@keyframes定义动画关键帧，结合animation属性实现元素移动与透明度渐变。1.使用transform和opacity设置0%、50%、100%阶段的位移与透明度；2.将moveAndFade动画绑定到元素，设时长3s、曲线ease-in-out、无限循环；3.HTML中添加.animated-elementdiv触发动画；4.可选forwards保持最终状态。
-
JavaScript装饰器（@）仍是Stage3提案，未被ECMAScript标准采纳，所有浏览器原生不支持；必须经Babel或TypeScript编译转译为函数调用才能执行，其本质是语法糖而非内置机制。
-
最直接的方式是使用contenteditable属性控制元素编辑状态，或通过disabled/readonly控制表单元素。结合JavaScript可实现动态切换，如点击切换编辑模式、blur事件触发保存等。对于富文本，需处理粘贴净化、XSS防护及光标定位；对于即时编辑，可通过DOM替换实现“显示-编辑”切换。安全性方面，必须后端净化用户输入，前端配合CSP和ARIA提升安全与可访问性，同时采用防抖优化性能。
-
CSSGrid响应式需配合媒体查询实现，因其本身不自动响应；常用方法包括用@media切换grid结构、用repeat(auto-fit,minmax())自动调整列数、重定义grid-template-areas适配不同屏幕。
-
导航菜单flex间距不均主因是容器未设明确宽度，导致justify-content无效；需设width:100%或max-width，并避免子项脱离文档流、文字换行及宽度假设。
-
flex-grow的数值表示子项对主轴剩余空间的分配比例，非像素或百分比；仅当容器有剩余空间时生效，比例决定各子项扩展量，绝对值无意义。
-
跳动动画必须用@keyframes显式定义至少四帧（0%/25%/50%/75%/100%）实现下压→回弹→过冲→回稳，禁用冲突transition，hover时启用ease-out动画并设will-change:transform，触屏改用focus或JS触发。
-
正确处理JSON需注意序列化与反序列化的细节。1.JSON.stringify会忽略函数、undefined等值，Date自动转为ISO字符串；2.使用replacer参数可过滤或转换字段，如保留特定属性或修改数值；3.JSON.parse的reviver参数可用于解析时转换数据类型，如将日期字符串还原为Date对象；4.循环引用会导致序列化失败，可通过自定义replacer避免或使用flatted等库安全处理。掌握这些技巧可提升数据交换的可靠性。
-
使用transform和transition实现Flexbox子元素高性能动画，避免修改layout属性，结合flex、opacity和max-width控制布局与视觉效果，保持排列稳定。
