流体布局

元信息

目标：理解"宽度不写死"的布局思路——用百分比等相对单位让版面随视口伸缩；同时看清流体布局的能力边界（只伸缩、不重排），从而理解它为何进一步演进为响应式设计
关键概念：流体布局、固定布局、百分比宽度、min-width/max-width、包含块、重排
关联阶段：cp2
常见误区：以为流体布局就是响应式（流体无断点、不重排，只是整体缩放）；以为百分比是相对屏幕宽度（相对的是包含块）；忘了设 min-width 兜底，窄屏下内容被挤碎

固定与流体

固定布局：版面宽度写死（如 width: 960px），视口再宽再窄都不变——源于印刷排版思维，配 960 栅格（见栅格布局）
流体布局：宽度用百分比等相对单位，版面随视口伸缩——把"版面多宽"的决定权交给浏览器窗口

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

注意示例中 min-width/max-width 的兜底作用：流体不是无限伸缩，太窄内容会碎、太宽行长难读
百分比相对于包含块（父元素的 content 宽度），不是屏幕——嵌套时逐级传递

能力边界

流体布局只解决"宽度自适应"，解决不了"内容重排"：

视口变窄时，两栏只是被压缩，不会自动叠成单栏——那是媒体查询（断点处改布局）的工作
现代做法是流体思想 + 断点重排的组合，即响应式设计；宽度单位也演进出 vw/fr 等（见弹性盒子布局、栅格盒子布局）