流式布局

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 63 课，共 76 课。

在响应式网页设计中，流式布局使用灵活的网格和百分比等相对单位，而不是固定的像素值，以适应不同的屏幕尺寸。这样布局就能扩展或收缩以适配任何屏幕，确保所有设备上的用户体验流畅。

流式布局的关键原则包括：

相对单位：宽度、高度、外边距和内边距使用百分比（%）、视口单位（vw、vh）或 em 单位（em），而不是固定像素（px）。

灵活的网格：使用 CSS Grid 或 Flexbox 创建基于网格的布局，使其能够适应不同的屏幕尺寸。

最大宽度和最小宽度：为元素设置最大宽度和最小宽度，防止它们在极端屏幕尺寸下变得太宽或太窄。

下面是一个使用百分比的基本流式布局示例：

.container {
    width: 90%; /* 容器占视口宽度的 90% */
    max-width: 1200px; /* 容器宽度不会超过 1200px */
}
.sidebar {
    width: 30%; /* 侧边栏占容器宽度的 30% */
    float: left;
}
.main-content {
    width: 70%; /* 主内容区域占容器宽度的 70% */
    float: left;
}

在这个示例中，.container 元素的宽度为流式宽度 90%，这意味着它始终占视口宽度的 90%。max-width 属性设置为 1200px，以防容器在大屏幕上变得过宽。

.sidebar 和 .main-content 元素的宽度分别为 30% 和 70%，并且会根据容器的宽度进行调整。

挑战

简单

给你一个 HTML 文档，其中有一个父级分区（<div>），包含两个子分区（<div>），它们的类分别是 sidebar 和 main。你的任务是使用百分比创建流式布局。按照以下步骤操作：

编写一条 CSS 规则，选择类为 container 的 <div> 元素。将它的 width 属性设为 80%，并将 margin 设为 0 auto。添加 1px solid black 边框以便查看。
编写一条 CSS 规则，选择类为 sidebar 的 <div> 元素。将它的 width 属性设为 25%，并让它向左浮动。
编写一条 CSS 规则，选择类为 main 的 <div> 元素。将它的 width 属性设为 75%，并让它向右浮动。

亲手试试

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>