4.4 显示定位尺寸对齐速查断案

4.4 显示定位尺寸对齐速查断案

本节是工具类的结案速查台：显示盒型（d-*）、定位（position-* 与偏移）、尺寸（w-*/h-*/vw/vh）、文本对齐（text-start 系）、垂直对齐（align-*）、浮动与溢出（float-*、overflow-*）、读屏专属（visually-hidden）一次归档。旧版教程把这堆类拆成九节，本册并成一案：每族给判读式与两个高频判例。

位置：工具类四案的收官。它回收 2.4 节显隐工具的余波（d-* 的盒型全集），也为第 6 章无障碍（visually-hidden）与第 7 章实战（贴角角标、全宽横幅）备好弹药。

速查台总览

图 4-4 盒子类工具速查矩阵

六族判例各两件

<!-- 一、显示：盒型即行为 -->
<span class="d-block">块级行程：独占一行，可设宽高</span>
<span class="d-inline-flex gap-1">行内弹性：不换行，内部仍可对齐</span>

<!-- 二、定位：贴角角标的三件套 -->
<div class="position-relative">
  <img src="cover.jpg" class="w-100 rounded" alt="课程封面">
  <span class="position-absolute top-0 end-0 translate-middle-y badge text-bg-danger m-2">
    限时
  </span>
</div>
<!-- 解读：父判 relative 立坐标系，子判 absolute 加 top/end 贴角，
     translate-middle-y 把纵向基点从顶边挪到自身中线，徽章不贴边也不悬空 -->

<!-- 三、尺寸：横幅与全屏 -->
<img src="banner.jpg" class="w-100" alt="全宽横幅">
<div class="vh-100 d-flex align-items-center justify-content-center">
  视口高的首屏：纵向居中
</div>
<div class="mw-100">内容再宽也不撑破父容器（长表格救急）</div>

<!-- 四、文本对齐的断点判（4.3 已立案，速查台收录判读式） -->
<p class="text-center text-lg-end">居中起步，1200px 起右对齐</p>

<!-- 五、垂直对齐：行内与表格的专利 -->
<span class="align-middle">与图片中线对齐的文字</span>
<td class="align-bottom">沉底单元格</td>

<!-- 六、浮动与读屏 -->
<div class="float-start me-2">老派环绕排版（新布局请用 d-flex）</div>
<div class="overflow-auto p-2 border" style="max-height: 8rem">内容超高自身滚动</div>
<span class="visually-hidden">此段仅供读屏软件朗读，视觉用户看不到</span>
​

裁决：工具类与自定义 CSS 的边界

⚠️ 常见坑：position-absolute 判出去后找不到坐标原点，九成是忘了给父元素判 position-relative。另一坑是 translate-middle 家族——它把元素自身尺寸的一半回拉，配 top-50 start-50 才是真居中，单用 top-50 只是顶边贴中线。

案例：全屏引导层的四族联判

背景：产品首访要盖一层全屏引导：背景暗化、中间一张卡片、右下角「跳过」按钮、卡片内容竖排居中。

操作：容器 position-fixed top-0 start-0 w-100 h-100 bg-black bg-opacity-50 d-flex align-items-center justify-content-center p-3；卡片 bg-body rounded-4 shadow-lg p-4 mw-100 宽度上限 w-md-50（md 起半屏）；跳过按钮 position-absolute bottom-0 end-0 m-3 btn btn-outline-light。

结果：任何视口下暗层铺满、卡片居中且不超半屏、跳过常驻右下角；手机上卡片被 p-3 留出安全边。

解读：四族在一张判决书里各司其职——fixed 与偏移管铺满，flex 族管居中，尺寸族管上限，透明度族（bg-opacity-50，颜色族的变体判）管暗化。这正是速查台的用法：需求拆成原子判决，每原子到对应族领一个类。

变式：引导层要随滚动固定在顶部的导航条——把 position-fixed 换成 position-sticky top-0，其余不动。fixed 脱离文档流永远占位，sticky 在流内到点才粘，两者判错会出现「内容被导航盖住」或「导航粘不住」两种翻案现场。

把案例落成可贴可跑的骨架：

<!-- 全屏引导层骨架：四族判决全部在类名上 -->
<div class="position-fixed top-0 start-0 w-100 vh-100 bg-black bg-opacity-50
            d-flex align-items-center justify-content-center p-3">
  <!-- 卡片：居中、圆角、阴影、限宽（md 起半屏） -->
  <div class="bg-body rounded-4 shadow-lg p-4 w-100 mw-md-50 position-relative">
    <h5 class="mb-3">三步上手</h5>
    <p class="text-body-secondary mb-0">引导内容竖排居中，暗层不挡卡片。</p>
    <!-- 跳过按钮：绝对定位贴卡片右下角，m-3 留出安全边 -->
    <button class="btn btn-outline-secondary position-absolute bottom-0 end-0 m-3">跳过</button>
  </div>
</div>
<!-- 效果：任意视口暗层铺满、卡片居中、跳过常驻角落；
     逐个删类观察回退：去 d-flex 族则卡片坠顶，去 mw-md-50 则大屏过宽 -->
​

结案要点

• 六族判读式统一：「族名 + 可选断点 + 取值」，盒子层与布局层共用同一套语法直觉；
• 贴角三件套 relative + absolute + 偏移/translate-middle；居中用 top-50 start-50 translate-middle；
• 尺寸族三线：百分比（w-50）、视口（vh-100）、上限（mw-100）；
• align-* 只判行内与表格；float-* 是遗留区，新布局一律 flex；
• visually-hidden 是给读屏的专属通道，6.2 节的无障碍案要大量动用它；
• 工具类与自定义 CSS 的边界：有零售类用类、特定值写 CSS、五处以上抽自定义类、交互态必须自写。

工具类结案。下一章拿到「立法权」：改变量、换主题，从根上重订刻度与色板。