HTML 布局

HTML 布局技术

网站通常需要将内容排列成列、侧边栏和网格等结构。现代 CSS 提供了强大的工具（Flexbox 和 Grid），可以使用语义化的 HTML 元素有效且响应式地实现这些布局。

布局的语义化结构

从使用语义化元素创建有意义的 HTML 结构开始。这为应用布局样式提供了坚实的基础。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic Layout Example</title>
  <link rel="stylesheet" href="layout.css">
</head>
<body>

  <header>
    <h1>My Awesome Website</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <div class="container"> <!-- main/aside 的可选包装器 -->
    <main>
      <h2>Main Content Title</h2>
      <p>This is the primary content area of the page. It might contain articles, descriptions, etc.</p>
      <p>More content follows here...</p>
    </main>

    <aside>
      <h3>Sidebar</h3>
      <p>Related links or supplementary information can go here.</p>
    </aside>
  </div>

  <footer>
    <p>Copyright &copy; 2024 My Website</p>
  </footer>

</body>
</html>

使用 CSS Flexbox 进行布局

Flexbox（弹性盒布局）非常适合在一维（一行或一列）中排列项目。它非常适用于导航栏、在容器内对齐项目，或创建像主内容区域旁边带有侧边栏的列布局。

示例（上方结构的 layout.css）：创建一个主内容 + 侧边栏布局。

/* layout.css - Flexbox 示例 */
body {
  font-family: sans-serif;
  margin: 0;
}

header, footer {
  background-color: #333;
  color: white;
  padding: 1em;
  text-align: center;
}

nav {
  background-color: #eee;
  padding: 0.5em;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 将列表项排列成一行 */
  justify-content: center; /* 居中项目 */
}

nav ul li {
  margin: 0 1em;
}

.container {
  display: flex; /* 对容器应用 Flexbox */
  padding: 1em;
}

main {
  flex: 3; /* 主内容占 3 份空间 */
  margin-right: 1em; /* main 和 aside 之间的间距 */
  background-color: #f9f9f9;
  padding: 1em;
}

aside {
  flex: 1; /* 侧边栏占 1 份空间 */
  background-color: #f0f0f0;
  padding: 1em;
}

/* 基本响应式处理 */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 将 main 和 aside 垂直堆叠 */
  }
  main {
    margin-right: 0;
    margin-bottom: 1em;
  }
}

这里使用的关键 Flexbox 属性：display: flex、flex-direction、justify-content、flex（grow/shrink/basis 的简写）。

使用 CSS Grid 进行布局

CSS Grid Layout 专为二维布局（行和列）设计。它使得创建复杂的网格结构（如杂志或复杂 Web 应用程序中常见的结构）比旧方法简单得多。

示例（layout-grid.css）：使用 Grid 定义整体页面结构。

/* layout-grid.css - Grid 示例 */
body {
  font-family: sans-serif;
  margin: 0;
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-rows: auto 1fr auto; /* header/footer 高度自动，main 行占据剩余空间 */
  grid-template-columns: 150px 1fr 200px; /* 定义列宽 */
  min-height: 100vh; /* 确保 body 占据整个 viewport 高度 */
}

header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 1em;
}

nav {
  grid-area: nav;
  background-color: #eee;
  padding: 1em;
}

main {
  grid-area: main;
  background-color: #f9f9f9;
  padding: 1em;
}

aside {
  grid-area: aside;
  background-color: #f0f0f0;
  padding: 1em;
}

footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 1em;
  text-align: center;
}

/* 为简洁起见移除 ul 样式 */
nav ul { list-style: none; padding: 0; margin: 0; }
nav ul li { margin-bottom: 0.5em; }

/* 基本响应式处理 */
@media (max-width: 768px) {
  body {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-rows: auto auto 1fr auto auto; /* 调整行 */
    grid-template-columns: 1fr; /* 单列 */
  }
}

这里使用的关键 Grid 属性：display: grid、grid-template-areas、grid-template-rows、grid-template-columns、grid-area。

过时布局方法（避免使用）

用于布局的 HTML Table：

	使用 `<table>` 元素进行页面结构布局（例如，将导航放入一个 `<td>`，内容放入另一个 `<td>`）是早期网页设计中的常见技术，但今天应严格避免使用。

为什么避免使用 Table 布局？

语义不正确： Table 用于表格数据，而非布局。
可访问性问题： 屏幕阅读器难以解释用 table 构建的布局。
不够灵活且难以维护： 使响应式设计变得困难，CSS 复杂。
性能： 浏览器可能需要加载整个 table 才能渲染。

用于布局的 CSS Float：

在 Flexbox 和 Grid 出现之前，使用 CSS 中的 float: left 或 float: right 是创建列的标准方法。虽然浮动仍然有其用途（例如，图片环绕文本），但它们不再是主要的页面布局推荐方法。

为什么避免使用基于 Float 的布局？

需要清除浮动： 通常需要使用 ‘clearfix’ 技巧来防止容器坍塌。
不够直观： 难以管理对齐、间距和垂直居中。
功能较弱： Flexbox 和 Grid 为响应式设计提供了更多的控制和灵活性。

坚持使用 Flexbox 和 Grid 来实现现代、可维护且响应式的网页布局。