CSS 网页布局

网页布局指把页面分成头部、主体、侧栏、页脚等区域，并让它们在不同屏幕下合理排列。现代做法以 Flex、Grid 为主，辅以 max-width、媒体查询 做响应式。

典型结构（HTML）

<div class="page">
  <header class="header">页头</header>
  <div class="main-wrap">
    <main class="main">主内容</main>
    <aside class="sidebar">侧栏</aside>
  </div>
  <footer class="footer">页脚</footer>
</div>

---

方式一：Flex 布局

整体纵向用 flex-direction: column，中间区域用 flex: 1 占满剩余高度（需父级有高度）；主内容与侧栏再横向 display: flex。

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header, .footer {
  flex-shrink: 0;
}

.main-wrap {
  flex: 1;
  display: flex;
}

.main {
  flex: 1;
  padding: 20px;
}

.sidebar {
  width: 280px;
  flex-shrink: 0;
  padding: 20px;
}

---

方式二：Grid 布局

用 grid-template-areas 或 grid-template-columns 划分区域，语义清晰：

.page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 280px;
  grid-template-areas:
    "header header"
    "main   sidebar"
    "footer footer";
}

.header { grid-area: header; }
.main   { grid-area: main;   padding: 20px; }
.sidebar { grid-area: sidebar; padding: 20px; }
.footer { grid-area: footer; }

---

内容区宽度限制（max-width + 居中）

主内容通常不铺满整屏，而是限制最大宽度并居中：

.main {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

---

响应式：小屏隐藏侧栏或改为上下堆叠

用 @media 在小屏时改 Grid 或 Flex，让侧栏到主内容下方或隐藏：

@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }

  /* 或 Flex 时： */
  .main-wrap {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
  }
}

---

小结

• 整体结构：header + 主区（main + sidebar）+ footer；用 Flex 或 Grid 分配空间。
• 主内容用 max-width + margin: 0 auto 限制宽度并居中。
• 小屏用 @media 改 Grid/Flex，让侧栏下移或全宽，实现响应式布局。

下一节学习 CSS !important。