卡片容器应优先用div而非section或article，因其轻量可控、便于样式控制；语义化由内部h3、p等元素承担，避免强加于容器。
卡片容器用 div 而不是 section 或 article
多数人一上来就套语义化标签，结果发现边距、宽高控制困难。卡片本质是视觉容器，div 最轻量、最可控。语义化该交给内容本身（比如卡片里放 h3 和 p），别强加在容器上。
- 用
div可直接设width、max-width，不用重置浏览器对section的默认 margin - 避免嵌套过深：一层
div.card包住头、体、脚就够了，别再套div.card-inner - 如果卡片要响应式堆叠，直接给
.card加display: flex或display: grid，别依赖外层 wrapper
box-shadow 比 border 更适合卡片悬浮感
纯 border 看起来像贴在页面上的框线，而卡片需要“浮起”错觉。box-shadow 能模拟真实光照层次，且不占布局空间。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 推荐值：
box-shadow: 0 2px 8px rgba(0,0,0,0.08)—— 轻、不压字、适配浅/深背景 - 别用
box-shadow: 0 0 10px #ccc：硬边+无透明度，移动端看像糊边 - 悬停增强时只改
shadow和transform: translateY(-2px)，别动background或border，否则重绘开销大
卡片内文字行高与内边距的黄金比例
卡片看着“空”或“挤”，90% 出在 padding 和 line-height 不匹配。文字没呼吸感，用户第一眼就不愿读。
-
padding: 1.25rem（即 20px）是安全起点，上下左右一致，避免padding-top: 1rem; padding-bottom: 1.5rem这类不对称写法 - 正文
p用line-height: 1.6，标题h3用line-height: 1.3，别全设成1.5—— 标题字大，行高小才紧凑 - 字体大小别用
px：用rem或em，比如font-size: 1.125rem（18px），方便整体缩放
移动端卡片宽度别硬写 320px
写死像素宽度，在 iPhone Plus 或折叠屏上要么溢出，要么留大片空白。卡片宽度应随容器自然流动，靠限制最大宽度来防拉伸。
- 正确写法：
width: 100%; max-width: 360px;—— 小屏填满，大屏卡住 - 别用
min-width: 320px：安卓小屏可能只有 320px 视口宽度，但有系统UI占用，实际内容区更窄 - 如果卡片横向并列，用
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，比媒体查询更省事
.card { margin-bottom: 1.5rem }，但最后一张卡片下方多出空白——用 :not(:last-child) 限定才是干净解法。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
