container-lines

name	container-lines
description	为精确、结构化的网页布局添加带迷你角方块的竖向容器尺寸参考线。当被要求容器线、测量式布局参考线、竖向边界线、编辑网格标记，或小角方块框架细节时使用。

Container Lines

何时使用

• 页面需要微妙的竖向参考线来揭示内容容器的宽度。
• 主视觉、区块或产品页显得太松散，需要结构张力。
• 设计需要迷你角方块、测量式边缘，或安静的技术感框架。

规则

1. 在主内容容器的左右边缘绘制参考线。
2. 保持线条纤细：1px，低不透明度。
3. 在容器角落或区块交点处添加迷你方块。
4. 让线条系统在各区块间保持一致；不要逐区块改变宽度。
5. 把线条置于内容之后、但在页面背景之上。
6. 禁用指针事件，让参考线永不阻挡 UI。

基础令牌

:root {
  --container-max: 1120px;
  --container-pad: clamp(20px, 4vw, 48px);
  --line-color: rgba(24, 24, 27, 0.14);
  --line-strong: rgba(24, 24, 27, 0.28);
  --corner-size: 6px;
}

页面容器线

在布局外壳上使用伪元素。

.container-lines {
  position: relative;
  isolation: isolate;
}

.container-lines::before,
.container-lines::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 1px;
  background: var(--line-color);
  pointer-events: none;
}

.container-lines::before {
  left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
}

.container-lines::after {
  right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
}

角方块

给需要精确测量感的区块添加四个小方块。

.corner-squares {
  position: relative;
}

.corner-squares > .corner {
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  background: var(--line-strong);
  pointer-events: none;
}

.corner.top-left { top: 0; left: 0; transform: translate(-50%, -50%); }
.corner.top-right { top: 0; right: 0; transform: translate(50%, -50%); }
.corner.bottom-left { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.corner.bottom-right { right: 0; bottom: 0; transform: translate(50%, 50%); }

<main class="container-lines">
  <section class="corner-squares">
    <span class="corner top-left"></span>
    <span class="corner top-right"></span>
    <span class="corner bottom-left"></span>
    <span class="corner bottom-right"></span>
    ...
  </section>
</main>

极简区块包裹器

使用与线条位置相同的容器宽度。

.content-container {
  width: min(100% - (var(--container-pad) * 2), var(--container-max));
  margin-inline: auto;
}

审美准则

• 把线条当作结构，而非装饰。它们应安静地组织页面。
• 不要给每个嵌套组件都加线条；把它们保持在页面或主要区块层级。
• 迷你方块应小而精确，通常 4px 到 8px。
• 除非整套视觉系统是技术或工业风，否则避免明亮的强调色。
• 让容器最大宽度和内边距在内容与参考线之间共享。

快速检查

• 竖向线条与内容容器边缘精确对齐。
• 角方块落在真实的容器或区块角落上，而非任意位置。
• 线条在浅色和深色背景上都保持微妙。
• 移动端在线条与内容之间仍有足够内边距。
• 参考线不拦截点击、悬停或文字选择。