-
混用%和fr时，百分比列先按容器宽度计算，fr列再平分剩余空间；顺序影响布局，如50%1fr1fr中后两列各得剩余空间的1/2，而非容器的25%。
-
纯CSS汉堡按钮失效的主因是DOM结构松动、transform-origin偏差或iOS点击失灵；需确保label包裹input、~选择器严格同级、每条横线独立设置transform-origin，并为label添加cursor:pointer和最小宽高。
-
通过CSS自定义滚动条样式可提升网页视觉协调性与用户体验，主流浏览器支持不同属性实现：使用::-webkit-scrollbar系列伪元素控制Chrome、Edge等浏览器的滚动条宽度、轨道背景、滑块颜色及悬停效果；Firefox则通过scrollbar-width和scrollbar-color简化设置。设计时应匹配网站主色调，如从品牌色中取色，轨道用透明度处理，深色主题配浅色滑块，并可结合毛玻璃或扁平化风格调整细节。需确保滑块最小高度30px、保持足够对比度，兼顾可访问性与跨浏览器兼容性，移动端通常无
-
用:root定义全局颜色变量需直接在:root中声明语义化变量（如--color-primary），避免嵌套或引用其他变量；使用var()时须设合法降级值，动态更新须调用document.documentElement.style.setProperty。
-
最常用可靠的CSS三角形方案是border法：宽高设为0，三边transparent，单边有色，大小由对应border-width决定；clip-path更灵活但兼容性稍差；SVG精准可交互，适合图标与动画。
-
JavaScript表单正则验证关键在于流程嵌入而非语法本身：blur触发主校验、input仅做轻量过滤；必加^$锚点防子串匹配；显式处理中文、空格、emoji；前后端校验逻辑必须一致，且后端不可省略。
-
Vue3的watch默认监听不到数组长度变化，因length属性非可写且无独立响应性；正确方式有三：①watch(arr,cb,{deep:true})；②watch(()=>arr.length,cb)；③封装操作并更新辅助ref。
-
混淆后的JavaScript代码调用并不复杂。1.混淆不会改变代码功能，只是重命名变量和函数，使其难以理解。2.调用混淆后的函数时，使用新的名称即可，如a(100,0.08)代替calculateTotal(100,0.08)。3.实际应用中需注意调试困难、代码维护、性能影响和兼容性问题。4.建议分阶段混淆，选择合适的混淆级别，并使用版本控制管理代码。
-
Symbol是JavaScript中用于创建唯一值的原始类型，常用于避免对象属性命名冲突；每次调用Symbol()都会返回唯一值，即使描述相同，因此sym1===sym2为false；用Symbol作属性名可使多个模块添加同名属性而不覆盖；Symbol属性不会被for...in、Object.keys()或JSON.stringify()遍历或包含，需通过Object.getOwnPropertySymbols()显式获取；Symbol适合添加私有或元信息属性，防止命名碰撞和意外修改。
-
加transform:translateY(-2px)更顺，因其触发硬件加速交由GPU处理；而top改变布局需重排，易卡顿。
-
CORS错误由浏览器强制执行，前端无法绕过，只能正确配置请求并捕获错误；服务端必须返回匹配的Access-Control-Allow-Origin等响应头，否则预检失败或响应被拦截。
-
CSS无法匹配data-前缀属性，必须显式写出完整属性名如[data-id]；伪通配写法[attr^="data-"]或1均无效；批量控制应统一加class，再用类选择器，或由JS动态添加class并监听变化。data-↩
-
Grid布局适合二维布局场景，如仪表盘、相册网格、表单对齐和响应式卡片墙；grid-template-columns/rows应优先用fr、minmax()与auto-fit配合repeat()；线编号从1开始，-1表示末尾线；调试务必开启DevTools的Grid面板并勾选显示线编号与区域高亮。
-
“查看网页源代码”显示的是服务器返回的原始HTML，不含JS动态修改内容；应使用开发者工具Elements面板查看实时DOM，Network面板确认HTML来源。
-
使用Mocha、Chai、Supertest和Sinon搭建Node.js单元测试框架，1.选择Mocha为测试运行器，Chai作断言库，Supertest发HTTP请求；2.安装依赖并组织test/目录结构；3.编写测试用例验证API行为；4.用Sinon模拟数据库避免外部依赖；5.配置npm脚本运行测试并用nyc生成覆盖率报告。
