版式图鉴LAYOUT ATLAS ⌕ 搜索
微调模式 海报
№ 294

微调模式

定义 Definition

细节决定专业度，用微小调整成就精准表达。

要目 Key Points
基线对齐微调精确对齐基线与网格，校正基线统一视觉水平，保持视觉秩序。
间距微调控制元素间的距离，建立清晰的层级关系；间距建议使用 4px 的倍数。
细微位移使用方向键进行微调（每次 1px），发现并修正偏差。
精度校正像素对齐检查与描边居中校正，优化细节提升质感。
用法 Application

微调不是苛求完美，而是尊重细节；通过基线、间距与位移的微小调整优化细节、提升质感。

关键词 Keywords
微调模式基线对齐间距位移精度
参见 Related
291 大体流动模式292 列下落模式293 布局切换模式
回忆评估 Review
看完海报，凭回忆作答——评分后排入复习队列
一级分类网页与 UI
二级主题响应式重排模式
本主题共10 个概念
高清原图 CDN 打开 ↗
学习路径 图鉴 · 研习两用
← 293 布局切换模式 295 画布外模式 →

实况演示

Live Demo · 真实 HTML/CSS
拖拽右下角调整宽度 · 独立页打开 ↗ 查看源码 ↗
关键 CSS fold / unfold 
/* ═══ 本 demo 自定义样式 ═══ */

.tw { display: flex; gap: 14px; align-items: center; }
  .tw .blk { flex: 1; min-height: 120px; }
  .tw .txt { padding: 12px; }
  .tw .txt .t { font-family: var(--serif); font-weight: 800; font-size: 22px; margin-bottom: 6px; }
  .tw .txt .d { font-size: 12.5px; color: var(--ink-2); }
  @media (max-width: 480px) {
    .tw { flex-direction: column; align-items: stretch; }
    .tw .txt .t { font-size: 17px; }
    .tw .txt .d { font-size: 11.5px; }
  }

/* ═══ 共享令牌类 · demo 外壳已内置 ═══ */

.blk {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line); border-radius: 2px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-2);
  padding: 10px; min-height: 34px;
}
.blk.acc {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent);
}
.blk.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  border: 1px solid var(--line); color: var(--ink-2); padding: 2px 8px;
  border-radius: 2px; background: var(--paper-2);
}
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.card .cv { aspect-ratio: 16/10; background: color-mix(in srgb, var(--accent) 10%, var(--paper-2)); border-bottom: 1px solid var(--line); }
.card .bd { padding: 9px 10px; }
.card .bd .t { font-weight: 600; font-size: 12.5px; }
.card .bd .m { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--accent) 22%, var(--paper-2)); border: 1px solid var(--line);
}
.fake-text { height: 8px; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 1px; }
.fake-text.w60 { width: 60%; } .fake-text.w80 { width: 80%; } .fake-text.w40 { width: 40%; }
.fake-text + .fake-text { margin-top: 6px; }

同主题

查看全部 →
[Demo]
291 大体流动模式
291 大体流动模式
[Demo]
293 布局切换模式
293 布局切换模式