gap在多视图切换中不自动继承，需为每个容器单独声明row-gap/column-gap；Flex与Grid中gap行为不同；Safari≤14.4需拆分gap为独立属性；首尾留白必须用padding，gap无法替代。
gap 在多视图切换中不自动继承或同步
多视图切换（比如 tab 切换、折叠面板、响应式断点切换）时，gap 不会跨容器“保持一致”——它只作用于当前生效的容器。如果你用 JS 切换 display: flex 和 display: grid，或动态替换子元素，旧的 gap 值不会自动带过去，除非 CSS 规则明确复用。
- 常见错误：在 tab 切换后发现间距变大/消失，其实是新容器没写
row-gap/column-gap，或父元素临时被设为display: block - 真实场景中，多数“多视图”是多个独立容器（如
.tab-pane.active），每个都得单独声明row-gap和column-gap，不能指望一个全局 class 管到底 - 如果用 CSS 类控制显隐（如
.view-grid { display: grid; row-gap: 12px; column-gap: 16px; }），确保类名准确应用到**当前激活容器**，而不是父 wrapper - 用 DevTools 检查“Computed”面板，确认生效的是
row-gap值，而不是被margin或padding覆盖了
Flex 与 Grid 容器切换时 gap 行为不一致
gap 在 flex 和 grid 中语义相同，但底层计算逻辑不同：Flex 的 row-gap 只在 flex-wrap: wrap 时起作用；Grid 的 row-gap 却始终控制行轨道之间距离，哪怕只有一行。
- 切换前是 Flex +
flex-wrap: wrap，row-gap: 8px正常显示；切换成 Grid 后若忘记加grid-template-rows或内容不足一行，row-gap仍存在，但视觉上“看不见”，因为没产生第二行 - 解决办法：Grid 容器下加
min-height: min-content或固定行数（如grid-template-rows: repeat(2, auto)）来验证row-gap是否真生效 - Flex 容器里，若子项设了
flex-shrink: 0且内容过宽，flex-wrap失效 →row-gap也失效；Grid 则无此问题，但可能触发滚动 - 别混用：
display: flex下写了gap: 12px，又在display: grid下只写column-gap: 12px，漏掉row-gap，结果垂直间距丢失
Safari 14.0–14.4 下 gap 简写完全静默失效
移动端多视图场景中，Safari ≤14.4 是主要兼容雷区：gap: 12px 或 gap: 8px 16px 全部被忽略，DevTools 的 Computed 面板里根本看不到该属性，不是加载失败，是浏览器根本不解析。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须拆成
row-gap: 12px和column-gap: 12px（即使等距也要写两个），所有现代移动浏览器（包括 Safari ≥14.0）都支持这两个独立属性 - 不要加
-webkit-gap—— Safari 14.0 对它也无效，白加 - 如果用 CSS-in-JS 或构建工具自动加前缀，关掉
gap相关 autoprefixer 规则，手动补全row-gap/column-gap - 媒体查询中调整视图布局时，优先改
row-gap/column-gap值，而不是切回margin—— 否则同一套 UI 在不同视图下逻辑割裂，维护成本飙升
首尾留白必须靠 padding，gap 无法替代
多视图切换常要“左右贴边、中间等距”，比如移动端卡片列表：第一张紧贴左边缘，最后一张紧贴右边缘，中间全是 gap 控制。但 gap 只管子项之间，对首尾和容器边缘毫无影响。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：容器加
padding-left和padding-right（如padding: 0 16px），再配row-gap: 12px/column-gap: 16px - 错误做法：试图用
:first-child { margin-left: 0 }或:last-child { margin-right: 0 }补 gap 缺失的首尾，这会破坏 Flex/Grid 布局的干净性，且在动态增删子项时极易错位 - 如果视图切换涉及滚动容器（如横向 tabs），
padding还能防止内容被截断；而gap对 overflow 完全无感 - 真正难的不是让间距“看起来一样”，而是当设计要求“桌面端 gap: 24px、移动端 gap: 12px、折叠态 gap: 0”时，得意识到这些是三个独立容器的样式决策，不是一套规则能条件覆盖的
