知识卡片应使用 article 标签，因其语义明确表示独立可分发的知识单元；box-shadow 推荐用 0 2px 8px rgba(0,0,0,0.08) 避免卡顿；排版用 css grid 三行轨道，代码块设 overflow-x: auto 和 tab-size: 2；小贴士用 aside；标题字号≤1.25rem；响应式仅需 768px 和 1024px 两断点；行高用 clamp 动态调节。
知识卡片用 article 还是 section？
直接用 article。它语义更准——每张卡片代表一个独立、可分发的知识单元（比如“flex-wrap 的三个取值”），而 section 只是逻辑分组，不强调独立性。搜索引擎和屏幕阅读器对 article 的识别更明确，对 SEO 和无障碍也更友好。
常见错误是套个 div 完事，结果语义丢失、缩放时结构混乱、打印样式失效。别图省事，多打 4 个字母换来的是后续维护成本降低。
卡片边框阴影怎么写才不糊、不卡顿？
用 box-shadow，但必须避开 blur-radius 过大 + spread-radius 为负的组合，否则在低配设备上滚动会掉帧。实测安全范围是：box-shadow: 0 2px 8px rgba(0,0,0,0.08)。
- 不要用
filter: drop-shadow()模拟阴影——它强制触发全层重绘，卡片一多就卡 - 避免在
:hover里突然加 12px 模糊半径，改成平滑过渡：transition: box-shadow 0.2s ease - 深色模式下记得重置
rgba的 alpha 值，比如rgba(255,255,255,0.1)
标题+代码块+小贴士怎么排版才不挤？
用 CSS Grid 控制主结构，别靠 margin 硬推。推荐三行显式轨道：grid-template-rows: auto minmax(0,1fr) auto，让中间内容区自动撑开，两端固定。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 代码块必须设
overflow-x: auto和tab-size: 2，否则长行直接撑破卡片 - 小贴士用
aside标签包裹，加font-size: 0.875em和上边距margin-top: 1rem，视觉上退后半步，不抢主信息 - 标题字号别超过
1.25rem，否则在移动端一行放不下，会折行破坏节奏
响应式断点设几个才够用？
只设两个：768px（平板竖屏）和 1024px（iPad 横屏/小桌面）。再多的断点纯属自我感动，实际项目里 90% 的卡片在 320–480px（手机）和 ≥1024px 下表现最稳定。
手机端把卡片宽度收窄到 90vw，左右留白；≥768px 改为 min(90vw, 640px)，防止单张卡片过宽导致阅读疲劳。别迷信“移动优先”，先跑通真实设备尺寸再微调。
最常被忽略的是字体行高——line-height: 1.5 在手机上看着松，但在 1024px 宽度下容易显得空，建议用 clamp(1.4, 1.45 + 0.05vw, 1.55) 动态微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
