HTML 布局元素和技术

网站通常以多列形式显示内容（就像杂志或报纸一样）。

HTML 布局元素

HTML 有几个语义元素定义了网页的不同部分

<header> - 定义文档或部分的标题
<nav> - 定义一组导航链接
<section> - 定义文档中的一个部分
<article> - 定义独立的、自包含的内容
<aside> - 定义除内容之外的内容（例如侧边栏）
<footer> - 定义文档或部分的页脚
<details> - 定义用户可以根据需要打开和关闭的更多详细信息
<summary> - 定义 <details> 元素的标题

<header> - 定义文档或部分的标题 <nav> - 定义一组导航链接 <section> - 定义文档中的一个部分 <article> - 定义独立的、自包含的内容 <aside> - 定义除内容之外的内容（例如侧边栏） <footer> - 定义文档或部分的页脚 <details> - 定义用户可以根据需要打开和关闭的更多详细信息 <summary> - 定义 <details> 元素的标题 您可以在我们的 HTML 语义 章节中了解更多关于语义元素的信息。

HTML 布局技术

有四种不同的技术来创建多列布局。每种技术都有其优缺点

• CSS 框架
• CSS float 属性
• CSS flexbox
• CSS grid

CSS 框架

如果您想快速创建布局，可以使用 CSS 框架，例如 W3.CSS 或 Bootstrap。

CSS Float 布局

使用 CSS float 属性来完成整个网页布局很常见。Float 很容易学习 - 您只需要记住 float 和 clear 属性是如何工作的。**缺点：** 浮动元素与文档流相关联，这可能会影响灵活性。在我们的 CSS Float 和 Clear 章节中了解更多关于 float 的信息。

CSS Flexbox 布局

使用 flexbox 确保当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素表现得可预测。

在我们的 CSS Flexbox 章节中了解更多关于 flexbox 的信息。

CSS Grid 布局

CSS Grid 布局模块提供了一个基于网格的布局系统，具有行和列，使设计网页变得更容易，无需使用浮动和定位。

在我们的 CSS Grid 简介 章节中了解更多关于 CSS 网格的信息。