现代网页布局：从内在响应到视觉层级

01

布局模型：Grid 与 Flexbox 的职责边界

从空间关系出发选择布局算法

Grid 和 Flexbox 并不是互相替代的两套语法。更准确的区别在于：Grid 处理二维约束，Flexbox 处理单一主轴上的空间分配。

当多个区域需要同时对齐到稳定的行和列，例如文章主体与目录、仪表盘中的图表区域、卡片列表中的标题和操作区，布局关系已经跨越两个方向，此时 Grid 更接近问题本身。它先定义轨道，再让元素占据轨道，因此适合表达页面骨架和明确的空间秩序。

当问题主要是“这一行的剩余空间如何分配”，例如导航项、工具栏、头像与用户信息、按钮组，Flexbox 通常更直接。它围绕主轴计算基础尺寸、增长、收缩和对齐，适合内容数量会变化但阅读顺序保持线性的组件。

成熟的页面通常混合使用二者：外层 Grid 负责宏观区域，区域内部再用 Flexbox 组织局部内容。布局边界应与组件边界大致一致，只在确实需要跨组件对齐时共享网格。

等宽网格的轨道宽度

t = \frac{W - (n - 1)g}{n}

W 为容器可用宽度，n 为列数，g 为列间距，t 为每条轨道的实际宽度。该式也是第一组演示绘制网格位置的基础。

Flexbox 的自由空间分配则先计算所有项目的基础尺寸之和。当剩余空间为正时，按照 flex-grow 的比例扩张；空间为负时，按照“收缩因子 × 基础尺寸”的权重压缩。较宽的项目因此通常承担更多收缩量，这也是 Flexbox 在内容驱动的一维工具栏中比固定百分比更自然的原因。

模型选择依据

约束维度必须同时控制行与列时使用 Grid；只处理主轴空间时使用 Flexbox。
内容顺序视觉重排不能破坏 DOM 中的阅读与键盘顺序，布局算法应服务于语义结构。
最小尺寸给可收缩区域使用 minmax(0, 1fr) 或 min-width: 0，明确允许其变窄。
嵌套边界外层网格定义页面骨架，组件内部自行布局，减少跨层耦合。

带编号的 CSS Grid 网格线 — Grid 通过网格线、轨道和区域描述二维位置。来源：MDN CSS Grid 基础概念。

CSS 负责真实页面的排列，D3 负责把同一组数据映射成两种布局结果。

/* 重点：Grid 负责二维页面骨架 */
.page-shell {
  display: grid; /* 同时管理行与列，适合侧栏 + 正文的页面骨架 */
  grid-template-columns: 16rem minmax(0, 1fr); /* 侧栏固定；正文分配剩余空间，允许缩至 0 */
  gap: 1.5rem; /* 由父级统一设置间距，避免相邻组件的 margin 叠加 */
}

/* 工具栏只需沿一个方向排列；minmax(0, 1fr) 则用于防止正文的长内容撑宽轨道。 */
.toolbar {
  display: flex; /* 主轴默认水平；各按钮宽度可以由内容决定 */
  flex-wrap: wrap; /* 空间不足时换行，不把按钮挤出正文 */
  align-items: center; /* 沿交叉轴居中，协调图标与文字按钮的高度 */
  gap: .75rem; /* 换行后仍由同一个规则维护行、列间距 */
}

// 重点：先计算数据位置，再由 D3 统一更新视图
// gridLayout / flexLayout 是布局计算函数，返回每个元素的稳定 id 和局部像素坐标。
const positions = mode === "grid"
  ? gridLayout(items, containerWidth)
  : flexLayout(items, containerWidth);

svg.selectAll("g.item")
  .data(positions, d => d.id) // 使用稳定键，让同一内容在模式切换后仍对应原来的节点
  .join(enter => enter.append("g").attr("class", "item")) // 补齐新增节点，移除退出数据
  .interrupt() // 取消上一段插值，连续拖动滑轨时不会累积动画队列
  .transition().duration(320) // 只插值布局结果，不在每一帧重新推导排版规则
  .attr("transform", d => `translate(${d.x},${d.y})`); // 整组移动，保持文字与边框的相对位置

02

内在响应式布局：由内容决定列数

让最小内容尺寸参与布局决策

传统响应式设计习惯先选择几个设备宽度，再在媒体查询中写死列数。组件真正关心的却不是设备名称，而是自己是否还有足够空间容纳内容。

内在响应式布局把判断依据从“屏幕属于哪一类”转向“每一项至少需要多宽”。只要容器还能容纳一个满足最小宽度的新列，浏览器就增加列；空间不足时，内容自然换到下一行。断点因此来自内容，而不是设计者猜测的设备型号。

auto-fill 会保留当前容器能够容纳的空轨道，适合希望网格结构保持稳定的场景；auto-fit 会折叠没有内容的轨道，让已有项目扩展并占用剩余空间，更适合常见的自适应卡片列表。

另一个高频问题来自 1fr。网格项目默认仍受内容最小尺寸约束，长链接、不换行代码或具有固有宽度的图片都可能撑破轨道。允许轨道真正缩小时，应显式使用 minmax(0, 1fr)；Flexbox 子项中的同类问题通常使用 min-width: 0 处理。

内容驱动的列数与列宽

n = \max\!\left(1,\left\lfloor\frac{W+g}{m+g}\right\rfloor\right)

t = \frac{W - (n - 1)g}{n}

m 是卡片允许的最小宽度。每当 W 穿过 k(m + g) - g，列数都会发生一次离散变化，因此图表呈阶梯形。

内在尺寸与溢出控制

min-content 表示内容在不发生非必要溢出的前提下能压缩到的最小宽度，max-content 则表示内容保持自然展开时需要的宽度。fit-content() 在二者之间夹取可用空间，适合标题、标签和侧栏等不应无限扩张的区域。

测试内在响应布局时，不应只拖动视口。还要加入超长标题、缺失图片、不同语言、200% 字体缩放和极端项目数量。一个可靠的响应式网格，是在这些输入变化下仍能保持内容可读和操作可达。

浏览器和可视化使用相同的“最小卡片宽度 + 间距”约束。

/* 重点：列数由可用空间和卡片下限共同决定 */
.card-grid {
  display: grid; /* 让浏览器依据父容器的可用宽度计算列数 */
  grid-template-columns:
    repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); /* 空轨道折叠，已有卡片均分余量 */
  gap: 1rem; /* auto-fit 与 auto-fill 的阈值计算都必须包含间隙 */
}

/* 内层 min() 允许窄容器低于 15rem；min-width: 0 解除 Grid 子项的自动最小宽度。 */
.grid-item { min-width: 0; overflow-wrap: anywhere; } /* 长链接也能断行，不撑破卡片 */

// 重点：显式计算阈值，便于将 CSS 规则可视化
const capacity = Math.max(1,
  Math.floor((width + gap) / (minCardWidth + gap)) // 解 n*m+(n-1)*g ≤ W，再向下取整
);

const columns = mode === "auto-fit"
  ? Math.max(1, Math.min(capacity, items.length)) // 折叠空轨道；空数据仍保留一个计算基准
  : capacity; // auto-fill 保留容器能容纳的全部轨道，包括没有卡片的轨道

const cardWidth = (width - (columns - 1) * gap) / columns; // 先扣除列间隙，再平分剩余宽度
const x = d3.scaleBand()
  .domain(d3.range(columns)) // 每个整数代表一条列轨道，而不是一张卡片
  .range([0, width]) // 使用容器内部坐标，外侧留白由上层分组负责
  .paddingInner(gap / (cardWidth + gap)); // D3 的间隙参数是步长比例，不能直接传像素
// 第 i 张卡片使用 x(i % columns)；纵坐标由行号与真实卡片高度计算。

03

容器查询：基于局部空间的组件响应

让组件根据自身容器切换形态

媒体查询根据视口做决定，适合控制站点级布局；但一个组件可能同时出现在全宽内容区、狭窄侧栏和弹窗中。即使设备宽度完全相同，这三个容器给组件的空间也不同。

容器查询让组件根据父容器的尺寸或样式切换形态。同一张文章卡片在宽容器中可以采用图片与文字左右排列，在窄容器中改为上下排列；工具栏在空间不足时可以收起次要操作，而不需要知道页面路由或外层模板。

页面负责决定组件被放在哪里，组件负责决定自己在这块空间中如何呈现，二者不再通过大量页面级断点互相绑定。更稳健的方式是定义少量有意义的组件状态，例如紧凑、标准和宽屏，再让内容需求决定状态边界。

把组件状态写成分段函数

S(w)=\begin{cases}\text{紧凑}, & w < b_1 \\ \text{标准}, & b_1 \le w < b_2 \\ \text{宽屏}, & w \ge b_2\end{cases}

w 是查询容器的内联尺寸，b₁、b₂ 应来自内容开始拥挤的位置，而不是某款设备的宽度。

阈值应由内容反推

若宽屏卡片由图片、正文、间距和左右内边距组成，其最低可用宽度可以由各部分相加得到。先测量组成部分，再确定查询阈值，比从常见断点表中挑一个数字更可靠。

横向卡片的最低可用宽度

b=i+c+g+2p

i 是图片最低宽度，c 是正文可读宽度，g 是图文间距，p 是左右内边距。

容器查询还可以查询样式状态，例如主题令牌或组件变体。尺寸查询负责回答“是否放得下”，样式查询负责回答“当前处于哪套设计语境”。两者都应保持状态数量有限，否则组件会产生难以测试的组合爆炸。

容器查询控制真实组件，D3 使用同一阈值绘制状态切换过程。

/* 重点：组件查询自己的容器，而不是整个视口 */
.card-host {
  container-type: inline-size; /* 建立可查询的行内尺寸容器，查询对象是后代而非自身 */
}

.article-card {
  display: grid; /* 定义基础状态；容器查询只覆盖宽布局的差异 */
  grid-template-columns: minmax(0, 1fr); /* 默认图文上下排列，适用于窄侧栏 */
  gap: 1rem; /* 宽布局和紧凑布局共享间距令牌 */
}

@container (min-width: 26rem) { /* 阈值来自图片、文字与留白所需空间，不是设备名称 */
  .article-card {
    grid-template-columns: 11rem minmax(0, 1fr); /* 图片定宽，文字占据剩余空间 */
  }
}

// 重点：状态只由局部容器宽度决定
// containerWidth 来自组件宿主的 ResizeObserver；不要用 window.innerWidth 代替。
const state = containerWidth >= threshold // 阈值和测量值必须统一为 CSS 像素
  ? "wide" // 边界值归入宽布局，与 min-width 的包含关系一致
  : "compact";

svg.selectAll("g.card-part")
  .data(partsFor(state), d => d.id) // partsFor 先测量换行高度，再返回图片、标题与按钮的位置
  .join("g").attr("class", "card-part") // 新节点必须匹配 selectAll 的选择器，避免重复创建
  .attr("transform", d => `translate(${d.x},${d.y})`); // 同步更新边框和内容，避免切换中途相互穿插

04

Subgrid：嵌套组件的跨层对齐

在保持组件结构的同时共享父级轨道

组件化常常会破坏视觉对齐。每张卡片内部都有图片、标题、摘要和按钮；当标题长度不同时，如果每张卡片都建立独立网格，按钮就会停在不同高度，整行内容显得松散。

Subgrid 允许嵌套网格继承父网格的轨道。子组件仍然保持自己的语义和结构，但内部元素可以参与外层对齐，既不需要把卡片内部节点提升到父级，也不需要用固定高度猜测标题会占几行。

表单中的标签、输入框与错误提示，价格方案中的功能项，日程表中的日期与事件，都可能需要跨多个重复组件共享轨道。使用 Subgrid 的前提是，这些元素在信息结构上属于同一层级，并且跨组件对齐确实能帮助比较或扫描。

对齐偏差

D = \max_i(y_i)-\min_i(y_i)

yᵢ 表示第 i 张卡片操作区的纵向位置。独立轨道通常得到 D > 0；共享操作轨道时理论上 D = 0。

共享轨道而非共享高度

给标题写固定高度只能掩盖当前样例的差异，一旦字体、语言或缩放比例变化，猜测值就会失效。Subgrid 共享的是轨道计算结果：最高的标题决定标题轨道，最长的摘要决定摘要轨道，所有卡片随后在同一操作轨道上结束。

并非所有内容都应该严格对齐。信息结构不同的卡片若被强行塞进同一轨道，会产生大片无意义空白。判断标准是对齐是否提升横向比较效率，而不是页面是否看起来更“整齐”。

嵌套网格与父级网格的空间关系 — 嵌套网格与父网格的空间关系。来源：MDN CSS Grid 基础概念。

卡片继承父级行轨道后，标题、摘要与操作区可以跨卡片对齐。

/* 重点：子组件继承父级轨道，跨卡片共享对齐线 */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 三列卡片；共享行轨道而非固定文字高度 */
  grid-template-rows: auto auto 1fr auto; /* 图片、标题、摘要、操作区分别对应一条轨道 */
  gap: 1rem; /* 同时明确轨道间距，避免把辅助线绘制在文字所在行 */
}

.card {
  display: grid; /* 每张卡片也成为网格容器 */
  grid-row: span 4; /* 横跨父网格的四行，子项才能共享这四条轨道 */
  grid-template-rows: subgrid; /* 每行高度由跨卡片的内容共同决定，而不是各自独立计算 */
}

// 重点：先求共享操作轨道，再更新每张卡片的位置
// 必须分别取每条轨道的最大值；“各卡片总高度的最大值”并不等价于 Subgrid。
const titleRow = d3.max(cards, titleHeight) ?? 0; // 最长标题可能出现在第一张卡片
const summaryRow = d3.max(cards, summaryHeight) ?? 0; // 最长摘要可能出现在另一张卡片
const sharedActionY = topPadding + imageHeight + titleRow + summaryRow + 3 * rowGap;
// 三个 rowGap 分别位于图片/标题、标题/摘要、摘要/操作区之间。
cardGroups.select(".action")
  .attr("y", card => useSubgrid ? sharedActionY : localActionY(card)); // 按数据逐卡赋值
// 边框高度也由操作区底边 + 底部内边距计算，不能沿用切换前的固定高度。

05

视觉层级：注意力与信息优先级

通过尺度、间距和对比建立阅读顺序

结构正确不等于页面好读。浏览者通常不会立即逐字阅读，而是先通过大小、位置、颜色、间距和分组判断哪里最重要、哪些内容相关、下一步应该看哪里。

尺度是最直接的强调手段，但过多尺寸会让页面出现彼此竞争的层级。正文区域通常只需要少量稳定的文字等级，再结合字重、颜色和留白表达差异。真正重要的内容应在多个信号上获得适度强调，而不是只依赖一种醒目颜色。

亲密性决定内容如何分组。组与组之间的间距应明显大于组内间距。边框和背景也能建立共同区域，但如果每一段都装进卡片，边界会失去区分作用并增加视觉噪声。

对比可以来自明暗、大小、形状和空间，不应只依靠颜色；平衡也不等同于左右完全对称。相似的外观暗示相似功能，连续的对齐线引导视线，封闭区域建立分组。

模数尺度与对比度

s_k = s_0 \cdot r^k

\mathrm{CR} = \frac{L_1+0.05}{L_2+0.05},\quad L_1 \ge L_2

第一式用固定比例 r 生成稳定字号等级；第二式是 WCAG 的相对亮度对比公式。尺度建立主次，对比保证信息仍可辨认。

视觉权重需要预算

可以把粗体、大字号、高饱和色、强阴影和动画理解为有限的“注意力预算”。同一视口中同时使用的强信号越多，每个信号的区分度越低。主标题通常占据最高权重，正文和元信息逐级减弱，主要操作则通过位置、形状和颜色获得独立入口。

接近相关元素的组内距离应小于组间距离，使分组无需额外边框也能成立。
相似相同功能使用相同颜色、形状和交互反馈，减少重新识别成本。
连续稳定的左边缘、基线和网格线会自然引导视线移动。
图形与背景主体必须从背景中分离，但背景不应通过过强色彩与主体竞争。

把标题尺度、组间距与强调方式作为可调数据，而不是散落的魔法数字。

// 重点：把视觉权重表示为可比较的数据
const hierarchy = {
  titleScale: 1.35, // 标题与基准字号的比例，而不是随视口宽度无限放大
  groupGap: 28, // 语义分组间距，单位为 CSS 像素；应明显大于组内间距
  emphasis: "focused" // 将最高对比度集中到主要动作，避免所有元素同时争夺注意
};

const layout = composeArticle(hierarchy); // 先测量文字，再推导组框、按钮和阅读顺序标记的位置

svg.selectAll("g.visual-element")
  .data(layout, d => d.id) // 内容 id 不随强调模式变化，便于读者追踪同一个对象
  .join("g").attr("class", "visual-element") // 确保下次更新复用已有的分组节点
  .attr("transform", d => `translate(${d.x},${d.y})`); // 辅助框与正文一起更新，避免边框穿过文字

/* 重点：组间距大于组内间距，邻近关系才清晰 */
.meta-group { display: flex; flex-wrap: wrap; gap: .5rem; } /* gap 需要布局上下文；紧密间距表达同组关系 */
.content-group { margin-top: 1.75rem; } /* 用更大距离划分章节或信息组，不依赖装饰边框 */

/* 强调不只依赖颜色 */
.primary-action {
  font-weight: 700; /* 字重提供第二条识别线索，减少仅靠颜色区分状态的问题 */
  border: 2px solid currentColor; /* 必须有边框样式，单独设置 border-width 不会显示边框 */
}

06

页面风格的一致性：扁平化与液态玻璃

在统一结构和状态语义上切换视觉材质

风格一致性不是让所有页面看起来完全相同，而是让相同的结构、状态和操作遵循同一套规则。颜色令牌、圆角、间距、排版尺度与动效节奏应先形成稳定系统，扁平化或液态玻璃只是这套系统在材质层的不同表达。

一致性来自共享规则

同一组件在不同页面中应保持信息顺序、点击目标和状态语义不变。例如，悬停表示“可以操作”，按下表示“操作正在发生”，选中表示“当前上下文已切换”。视觉效果可以改变，但不能让读者重新学习交互逻辑。

设计令牌适合统一这些规则：主色决定操作优先级，边框和阴影表达层级，统一的位移与旋转范围控制反馈力度。将效果拆成“是否启用”和“强度”两个参数，还能避免不同组件各自写一套难以维护的动画。

两种材质的反馈策略

扁平化设计依赖清晰色块、边框和克制阴影，悬停浮起、随指针轻微旋转、层级阴影和边缘发光都应服务于可操作性。它的优势是信息直接、性能稳定，并且容易在密集内容中维持秩序。

液态玻璃保留相同结构和交互状态，在其上增加半透明背景、背景模糊、边缘折射、局部放大和色散。卡片与导航共用同一组材质参数：透明度、曲面形状和折射率同时作用于全部玻璃表面。扁平化模式使用白色卡片，浮起与指针旋转表现卡片的可操作性；导航指示器始终保持稳定尺寸，只沿水平方向平移。

超椭圆边缘与 Snell 折射

\left|\frac{x}{a}\right|^p+\left|\frac{y}{b}\right|^p=1

n_1\sin\theta_1=n_2\sin\theta_2

\begin{aligned}m(x)={}&\tan(\theta_1-\theta_2)\\&\cdot[T_0+H\,z(x)]\end{aligned}

p 控制边缘从圆到 squircle 的形状；n₂ 是玻璃折射率；H、T₀ 分别表示曲面高度与基础厚度；m(x) 最终编码进 SVG 位移贴图。

浏览器并不直接求解光路，而是先把每个像素的采样偏移编码到 Canvas：红通道表示横向位移，绿通道表示纵向位移，再由 feDisplacementMap 改写背景采样位置。色散则让红、绿、蓝通道使用略有差异的位移尺度，从而在边缘形成彩色镶边。

液态玻璃的拖拽手感采用阻尼谐振子，位置、缩放与拉伸都向目标状态收敛。较低阻尼会产生明显回弹，较高阻尼更快稳定；扁平化导航则采用无过冲的平移，以保持指示器的形状和阅读位置稳定。

曲面轮廓与阻尼运动

z(t)=\left[1-(1-t)^p\right]^{1/p}

a=-\omega^2(x-x_t)-2\zeta\omega v

t 是 [0, 1] 内的归一化边缘距离。曲面指数 p 决定轮廓；角频率 ω 和阻尼比 ζ 决定运动的收敛过程。

完整推导可参见《从 Snell 定律到 backdrop-filter：把苹果 Liquid Glass 复刻进网页》。

玻璃卡片和导航共享位移贴图参数，内容始终绘制在材质上方；扁平化导航只进行无过冲的水平平移。

// 重点：由超椭圆表面斜率和 Snell 定律计算边缘位移
// x 是边缘内的归一化位置，范围 0..1；p 控制超椭圆曲面，不是像素坐标。
const t = Math.max(.001, Math.min(.999, x)); // 避开端点的奇异导数，防止 Infinity / NaN 污染位移图
const incident = Math.atan(squircleDeriv(t, p) * (height / bezel)); // 用高宽比把归一化斜率转为实际斜率
const refracted = Math.asin(Math.sin(incident) / ior); // Snell 定律，空气折射率取 1，玻璃 ior ≥ 1
const displacement = Math.tan(incident - refracted)
  * (thickness + squircle(t, p) * height); // 光线路程包含基础厚度与当前位置的曲面高度，结果单位 px

// dx/dy 由位移量和边缘法线得到；这里的 R/G 是位移编码，不是最终显示的红绿颜色。
const mapScale = 2 * Math.max(maxDisplacement, .001); // SVG 解码为 scale × (channel - 0.5)
pixels[offset] = 255 * (dx / mapScale + .5); // 红通道编码横向；中灰表示没有横向位移
pixels[offset + 1] = 255 * (dy / mapScale + .5); // 绿通道编码纵向；正负方向分别落在中灰两侧
pixels[offset + 3] = 255; // 位移图必须不透明，否则透明区域会改变滤镜采样
// feDisplacementMap 的 scale 使用 mapScale；最终色散再以不同 scale 采样显示用的 RGB 三通道。

// 重点：标准阻尼谐振子同时驱动位置、缩放和惯性拉伸
function spring(value, velocity, target, omega, damping, dt) {
  const acceleration = -omega * omega * (value - target) // 回复力随离目标的距离增大；omega 是角频率
    - 2 * damping * omega * velocity; // 阻尼与速度方向相反；damping 小于 1 时允许回弹
  velocity += acceleration * dt; // 先积分速度，dt 必须以秒计并限制长帧，避免数值发散
  value += velocity * dt; // 用新速度推进位置，即半隐式 Euler；下一帧保留速度，惯性才连续
  return [value, velocity]; // 位置、缩放、凝聚与导航栏缩放各自保存独立的状态
}

// dt 取 Math.min(帧间隔毫秒 / 1000, .033)，限制长帧对积分稳定性的影响。
if (mode === "flat") {
  x += (target - x) * (1 - Math.exp(-dt / 0.065)); // 指数趋近，平稳平移，不产生过冲和旋转
  pill.style.transform = `translateX(${x}px)`; // 不叠加拉伸或凝聚变换
} else {
  // demo6 的位置弹簧阻尼较高以便吸附，缩放与拉伸阻尼较低以产生柔软的回弹。
  [x, vx] = spring(x, vx, target, 15, .80, dt); // 松手仅修改 target，不清空 vx
  [scale, scaleV] = spring(scale, scaleV, dragging ? 1.2 : 1, 20, .32, dt);
  [dockScale, dockV] = spring(dockScale, dockV, dragging ? 1.05 : 1, 18, .55, dt);
  const stretchTarget = Math.min(Math.abs(vx) * .0006, .22); // 惯性形变随速度增加，并限制最大幅度
  [stretch, stretchV] = spring(stretch, stretchV, stretchTarget, 13, .28, dt);
  // 按住 100ms 后再叠加横向收缩 / 纵向鼓起；松手恢复原形，但保留弹簧速度以完成回弹。
}

// surfaces 包含卡片底面、导航栏底面、选中胶囊；文字与图标单独放在滤镜上层。
instances.forEach((instance, i) => instance.update(surfaceOptions(surfaces[i]))); // 滑轨输入必须更新全部实例
// surfaceOptions 共享折射率、色散与倍率；导航保留原 demo6 的曲面比例，并单独控制背景模糊。
// 抓取时胶囊倍率为滑轨值 × 0.82；松手恢复滑轨值，而不是硬编码为 1。

现代网页布局：从内在响应到视觉层级

评论