流式布局
流式布局是一种网页设计，其中页面布局会随着窗口大小的变化而调整大小。实现这一点的方法是使用百分比而不是固定的像素宽度来定义页面区域。
大多数网页布局包含一列、两列或三列。在网页设计发展的早期，大多数用户的屏幕尺寸相近，因此网页开发人员会为各列指定固定宽度。例如，固定布局可能包含一个宽度为 960px 的主要内容区域，其中三列的宽度分别为 180px、600px 和 180px。这个布局在 1024x768 屏幕上可能看起来很不错，但在 1920x1080 屏幕上可能显得很小，在 800x600 屏幕上则无法完整显示。
流式布局通过使用百分比定义布局的每个区域，解决了这个问题。例如，网页开发人员可以创建一个占屏幕 80% 的布局，而三列可以分别占 18%、64% 和 18%。使用百分比后，内容可以扩展或收缩，以适应用户计算机的窗口。下面显示了用于创建固定布局和流式布局的CSS。
| 固定布局 | 流式布局 |
|---|---|
|
.content { width: 960px; } .left, .right { width: 180px; } .middle { width: 600px; } |
.content { width: 80%; } .left, .right { width: 18%; } .middle { width: 64%; } |
示例中的 CSS 类可以分别分配给页面HTML中的一个 div，其中 .left、.right 和 .middle 类包含在 .content 类中。content 类也可以分配给一个表格，而其他类可以分配给表格单元格。固定宽度的 .content 类不需要定义宽度，因为它会自动扩展到所包含 div 或表格单元格的宽度。
流式布局与响应式设计
“流式布局”和“响应式网页设计”这两个术语有时会互换使用，但它们是两种不同的概念。使用响应式网页设计创建的页面包含 CSS 媒体查询，这些查询会根据窗口宽度或访问页面所用设备的类型加载不同的样式。响应式网页设计需要的 CSS有时还包括(JavaScript）比基本的流式布局更多，但它也能更好地控制页面布局。
测试你的知识