-
Vue.js中使用TypeScript的Props应定义独立interface（如UserCardProps），避免内联类型；区分必传/可选，配合withDefaults保证类型安全与默认值一致性。
-
CSSGrid+aspect-ratio能纯CSS实现响应式图片瀑布流，关键在于原生支持aspect-ratio与grid-auto-flow:dense协同；需图片有明确宽高比、使用auto-fill列布局、启用dense填充、避免基线干扰，并通过占位防抖动、合理key控制渲染、Safari降级适配。
-
用<a>标签实现下载需添加download属性，但仅对同源URL有效；跨域须后端配合Content-Disposition:attachment响应头；推荐语义化<dl>结构，手动标注文件大小与格式，移动端需设display:inline-block提升点击体验。
-
侧边栏和顶部导航联动的关键在于基于路由层级动态激活：通过meta标记菜单归属，用useRoute和computed实时推导激活项，嵌套路由结构天然反映页面层级。
-
Spectre.css的.container在移动端不居中是因为默认固定宽度960px且未设margin:0auto，需手动添加.container类并配合断点类或使用.container-xl实现响应式居中。
-
DOCTYPE声明是触发浏览器标准模式的必要开关，必须为<!DOCTYPEhtml>且位于文档首行无任何前置字符，否则将导致怪异模式或几乎标准模式，引发盒模型、脚本API等异常。
-
clear:left表示元素左侧不允许有浮动元素，会下移至左侧无浮动元素为止，用于避免文字环绕或布局错位；clear:right同理，确保右侧无浮动元素。两者常用于清除浮动影响，适用于传统浮动布局中的内容分离，如多列布局后独占一行。尽管现代布局多用Flex或Grid，但在维护旧项目时仍具实用价值。
-
favicon是浏览器标签页等位置显示的小图标，必须添加以避免404请求和警告；最简方式是将favicon.ico放根目录并在head中用<linkrel="icon"href="/favicon.ico"type="image/x-icon">引入。
-
requestVideoFrameCallback比timeupdate更准，因其回调发生在视频帧提交至合成器前的渲染流水线早期，直接绑定真实帧呈现时刻，并提供精确mediaTime时间戳；而timeupdate仅按浏览器内部节流频率（约200ms）触发，与实际帧解码和渲染完全脱钩。
-
Less无法直接实现counter-reset和counter-increment自动递增，因其是编译时预处理器，而CSS计数器依赖DOM结构和运行时渲染；应仅用Less生成基础样式骨架，由浏览器执行计数逻辑。
-
直接用URL.createObjectURL下载文本会出错，因其仅接受Blob或MediaSource，传入字符串将抛出TypeError；必须先用正确编码（如charset=utf-8）和换行（如\r\n）构造Blob，再创建URL，并及时revoke释放内存，同时注意移动端Safari不支持download属性。
-
基础分页组件通过ul和li构建语义化结构，包含上一页、页码、下一页按钮，CSS实现居中布局、统一尺寸、悬停变色及当前页高亮，禁用状态置灰并禁用交互，支持响应式与JavaScript扩展，适用于各类项目翻页场景。
-
flex-wrap:wrap换行失效主因是父容器无宽度限制或子元素默认min-width:auto导致强制撑宽；应设父容器width/max-width，避免flex:1，改用flex:00auto或固定宽+flex-shrink:0，并禁用white-space:nowrap；间距推荐用gap替代margin防换行错位。
-
Flexbox子项高度不一致时，需设置父容器明确高度或min-height，并用align-items:stretch拉齐；子项内用display:flex、flex:11auto及min-height确保等高，IE11需避免flex:1简写。
-
摩天轮式旋转动画需两层配合：外层@keyframes控制整体匀速旋转，子项用nth-child配合rotate()和translate()实现均匀分布与正立效果，关键在transform顺序及反向旋转抵消歪斜。
