第 7 章 · Chapter 7
版式Layout
12 列网格、1200/1440 容器、4px 间距基准、工程感的圆角与 Navy 色相的阴影。
7.1网格与容器Grid & containers
12 列，列间距 24px（--cx-space-6）。容器 1200（--cx-container-lg）与 1440（--cx-container-xl）。本手册用 1200。
12 列 · 8+4 · 4+4+4（绿色为 accent-soft 强调块）
container.xl · 1440px（本页宽度不足时按比例显示）
container.lg · 1200px
7.2边距Page margins
| 设备 | 左右边距 | token |
|---|---|---|
| 移动 | 16px | --cx-space-4 |
| 平板（≥ 768） | 32px | --cx-space-8 |
| 桌面（≥ 1024） | 48px | --cx-space-12 |
本页的 .container 就按这三档实现，缩放窗口即可看到。
7.3间距阶Spacing scale
4px 基准。绿条高度即实际像素。
--cx-space-0 = 0。token 名即 4px 的倍数。
7.4圆角Radius
品牌形象偏“设备/工程”：默认 md，大卡片 lg，按钮 sm，头像/图标底 22%。
7.5阴影与描边Shadow & border
阴影用 Navy 色相，不用纯黑；暗色模式不透明度翻倍。
0 1px 2px / .08
0 4px 12px / .10
0 12px 32px / .14
| 描边 | 宽度 | token | 示例 |
|---|---|---|---|
| hairline · 分割线 | 1px | --cx-border-width-hairline | |
| thin · 输入框、次级按钮 | 1.5px | --cx-border-width-thin | |
| thick · 强调、焦点环 | 2px | --cx-border-width-thick |
7.6断点Breakpoints
| token | px | 典型变化 |
|---|---|---|
| --cx-breakpoint-sm | 640 | 卡片从 1 列变 2 列 |
| --cx-breakpoint-md | 768 | 页边距 16 → 32 |
| --cx-breakpoint-lg | 1024 | 页边距 32 → 48；3–4 列 |
| --cx-breakpoint-xl | 1280 | container.lg 1200 生效 |
| --cx-breakpoint-2xl | 1536 | container.xl 1440 生效 |
CSS 媒体查询无法引用自定义属性，代码里写像素值时以此表为准。
7.7层级z-index
| token | 值 | 用途 |
|---|---|---|
| --cx-z-base | 0 | 普通内容 |
| --cx-z-raised | 10 | 悬浮卡片 |
| --cx-z-sticky | 100 | 固定页眉（本手册） |
| --cx-z-overlay | 1000 | 遮罩 |
| --cx-z-modal | 1100 | 对话框 |
| --cx-z-toast | 1200 | 提示 |