CSS实现黄金比例布局需手动设定数值：主栏宽61.8%、侧栏38.2%，字体按16px→26px→12px等比缩放，外边距慎用避免维护困难，单位统一并结合box-sizing和clamp()保障响应性与可读性。
HTML 本身不定义“黄金比例布局”，它没有内置的布局比例逻辑；真正起作用的是 CSS 中对宽度、间距、字体大小等数值的主动设定——你得自己算好 1.618 的倍数关系，再写进 width、padding 或 font-size 里。
怎么用 CSS 实现黄金比例宽度划分（比如主栏/侧栏）
黄金比例常用于划分容器内两列区域：若总宽为 100%，主栏 ≈ 61.8%，侧栏 ≈ 38.2%。直接写死百分比最稳妥，避免依赖 JS 计算或不可控的父容器行为。
- 别用
calc(100% / 1.618)—— 浏览器会四舍五入导致两列加起来≠100%，尤其在小屏下容易换行或溢出 - 推荐写法：
width: 61.8%和width: 38.2%，并加box-sizing: border-box防边框撑开 - 如果需要响应式退化，可在
@media中改用固定断点（如max-width: 768px）后切回 100%/0 或 70%/30%，别强行维持黄金比
字体层级怎么套黄金比例（h1 → p → small）
黄金比例字体缩放不是玄学，而是把字号设成近似等比数列：比如 base font 是 16px，h1 就取 16 * 1.618 ≈ 26px，h2 取 26 / 1.618 ≈ 16px（回退），再往下是 16 / 1.618² ≈ 10px —— 但实际中 10px 太小，需人工截断或设最小值。
- 别盲目套公式：移动端
10px文字几乎不可读，应设min-font-size: 12px或用clamp()限定范围 - 更实用的做法：用
rem基于根字号，例如html { font-size: 16px; }，然后h1 { font-size: 26px; }、p { font-size: 16px; }、small { font-size: 12px; }—— 这三个值本身已隐含黄金比的视觉节奏感 - 注意 line-height 不必按黄金比设，1.5–1.6 是可读性更关键的阈值
margin/padding 用黄金比会出什么问题
用 margin-bottom: 26px（≈16×1.618）替代 24px 看似精致，但实际维护成本高：一旦基础字号调整，所有外边距都要重算；且和设计系统里的 spacing scale（如 4px/8px/12px/16px 倍数）冲突。
立即学习“前端免费学习笔记（深入）”；
- 优先采用设计系统已定义的 spacing token，比如
margin-bottom: var(--space-l);，而不是硬编码26px - 若必须手算，建议只在局部模块（如卡片标题与正文之间）用一次黄金比，不要全站蔓延
- 特别注意：flex gap、grid gap 不支持百分比，写
gap: 26px在高 DPI 屏上可能显得过松，此时应搭配rem或em单位
黄金比例不是自动生效的魔法数字，它只在你明确控制计算起点（比如以哪个元素的 width 或 font-size 为基准）、且整个链路单位统一时才可靠。最容易被忽略的是：不同设备像素比下，26px 在物理尺寸上并不恒定——所谓“视觉和谐”，最终还得靠人眼校验，而不是数学正确。
