用语义化HTML结构（section包裹article，header+p）和CSS Grid实现三列响应式服务卡片，避免div滥用；图标用inline SVG，标题用h3，描述用p；hover仅改border和shadow以减少重排；移动端需单独设置字体和行高，padding用rem，body设font-size:100%。
用纯 HTML + CSS 实现服务卡片布局，不依赖框架
直接写语义化 <section> 包裹一组 <article>，每张服务卡片用 <header> + <p> 组合，避免滥用 <div>。结构清晰了，后续加 hover 效果或响应式才不容易错位。
常见错误是把图标、标题、描述全塞进一个 <div class="card"> 里，结果改字体大小时行高崩、换行错乱。用语义标签后，CSS 只需控制 article 的 padding 和 header 的 margin-bottom，视觉节奏自然出来。
实操建议：
- 每个服务项用
<article>，别用<div>—— 屏幕阅读器和 SEO 都认这个 - 图标用 inline SVG（不是图片），嵌在
<header>里，宽高设为1.5em，随文字缩放 - 标题用
<h3>，不是<h2>或<span>—— 层级不能跳，也不能降级 - 描述段落用
<p>，别用<div>+text-align: justify—— justify 在小屏上断词极难看
CSS 控制三列等宽响应式，避开 Flexbox 常见塌陷
用 display: grid 比 flex-wrap 更稳：三列在桌面端，768px 下自动转两列，480px 下单列。关键是设置 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，而不是写死 1fr 1fr 1fr —— 否则小屏会横向滚动。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 没给
grid-gap设单位（比如只写gap: 1.5rem），某些旧版 Safari 会忽略 - 卡片内元素没设
min-width: 0，导致长英文或 URL 撑破容器（尤其在<p>里） - 用
align-items: start而不是默认的stretch，否则高度不一致的卡片底部对不齐
鼠标悬停时只动边框和阴影，不动尺寸
很多人加 transform: scale(1.02) 或 margin-top: -2px，结果触发重排（reflow），滚动卡顿，移动端点按还有延迟。真正轻量的做法是只改 border-color 和 box-shadow，这两者只触发重绘（repaint）。
示例关键代码：
article {
border: 1px solid #e0e0e0;
transition: border-color 0.2s, box-shadow 0.2s;
}
article:hover {
border-color: #4a6fa5;
box-shadow: 0 4px 12px rgba(74, 111, 165, 0.1);
}
注意：transition 必须写在常态规则里，不能只写在 :hover 中，否则鼠标移入有延迟，移出无动画。
移动端字体和行高必须重设，不能靠继承
桌面端设了 font-size: 1rem、line-height: 1.6，但手机上 16px 文字太小，1.6 行高又太挤。必须在媒体查询里单独调：
@media (max-width: 480px) { article h3 { font-size: 1.125rem; } }-
p的line-height改成1.7，小屏阅读更轻松 - 所有
padding用rem，别用px—— 否则用户放大字体时卡片会错位
最常被忽略的是：没给 body 设 font-size: 100%，导致部分安卓浏览器把基础字号解析成 13.33px 而非 16px，整个服务区文字偏小且行距发紧。
