-
HTML中插入真正空格需用 实体或white-space:pre-wrap等CSS；中英文间须加空格以符合GB/T15834—2011规范，避免阅读卡顿。
-
多列布局间距不均的根源在于剩余空间分配未明确控制；应依布局类型选用justify-content:space-between（Flex需满足容器定宽、子项总宽小于容器、无flex:1等占满行为）或gap+grid-template-columns（Grid中用gap设间距，repeat(auto-fit)配合justify-content实现等距）。
-
flex能让箭头始终贴右，关键在于父容器设display:flex并用justify-content:space-between或箭头加margin-left:auto，避免flex:1误用、绝对定位及DOM节点动态增删导致的错位。
-
等比例排列图片需用aspect-ratio设父容器宽高比+object-fit控制填充方式，而非仅依赖Grid布局；cover裁剪填满，contain完整显示；小屏需clamp()或媒体查询防列崩。
-
文件上传依赖<inputtype="file">触发change事件获取FileList，需用FileReader异步读取内容并封装进FormData通过fetch上传，禁止手动设置Content-Type。
-
浮动与绝对定位本质冲突，混用会导致布局错乱、高度塌陷等问题；因absolute完全脱离文档流，会忽略float声明，应明确职责、择一使用，优先采用Flexbox或Grid等现代布局方案。
-
固定定位图像必须用position:fixed并显式设置至少两个方向偏移（如top:20px;right:30px;），配合z-index控制层级，用vw/vh或媒体查询适配响应式，图像尺寸需用max-width或object-fit保真，避免width:100%拉伸失真。
-
使用ESLint和Prettier统一代码风格，变量命名遵循camelCase、PascalCase或UPPER_CASE规范；2.优先用const和let声明变量，合理使用解构赋值；3.函数多用箭头函数，异步统一采用async/await并配合try/catch处理错误；4.同步与异步均需有效捕获异常，校验外部数据；5.采用ESModules模块化，按功能拆分文件，避免循环依赖；6.优化性能避免重复操作，防范XSS和动态执行代码风险，关键校验需后端配合。借助工具链自动化检查与格式化，结合代码审查，提升代
-
Chart.js适合快速实现常规图表，D3.js适合高度定制化复杂可视化；前者开箱即用、响应式强但扩展性有限，后者掌控底层、生态丰富但学习成本高。
-
JSON.parse()报错Unexpectedtoken主因是传入非字符串值；JSON.stringify()静默丢失undefined/function/Symbol等；response.json()自动解析但不校验Content-Type；日期、BigInt、类需自定义序列化协议。
-
使用@keyframes定义宽高变化并结合animation实现渐变动画，如：@keyframesgrow{from{width:100px;height:50px;}to{width:200px;height:100px;}}，再通过animation:grow2sease-in-outinfinitealternate应用到元素。注意性能优化，推荐视觉缩放用transform:scale()替代，避免频繁重排。
-
id选择器优先级高于class，因特异性值更高（如#header.title为110，.title为10），故前者样式生效；覆盖时可用更高特异性选择器（如组合id或添加父级）、相同结构后置规则，或临时用!important；建议少用id设样式，多用class实现可复用、易维护的系统，遵循BEM等规范提升语义化。
-
最稳妥获取元素的方式是通过ID使用document.getElementById('myId')；无ID时用document.querySelector()或querySelectorAll()；改样式优先操作classList或预设CSS类，避免硬编码style。
-
CSS中url()路径错误是背景图不显示的主因，需按CSS文件位置而非HTML位置写相对路径；大小写敏感、Network查状态码、background简写覆盖、容器无尺寸等亦为常见原因。
-
本文详解在前端（JavaScript/TypeScript/Angular）中将ISO格式UTC时间字符串正确解析为用户本地时区时间的多种可靠方法，涵盖原生Date对象、Luxon库及AngularDatePipe的最佳实践。
