HTML 布局元素和技巧

网站常常以多列显示内容（就像杂志和报纸）。

HTML 布局元素

网站常常以多列显示内容（就像杂志和报纸）。

<header> - 定义文档或节的页眉
<nav> - 定义导航链接的容器
<section> - 定义文档中的节
<article> - 定义独立的自包含文章
<aside> - 定义内容之外的内容（比如侧栏）
<footer> - 定义文档或节的页脚
<details> - 定义额外的细节
<summary> - 定义 details 元素的标题

<header> - 定义文档或节的页眉 <nav> - 定义导航链接的容器 <section> - 定义文档中的节 <article> - 定义独立的自包含文章 <aside> - 定义内容之外的内容（比如侧栏） <footer> - 定义文档或节的页脚 <details> - 定义额外的细节 <summary> - 定义 details 元素的标题 您可以在我们的 HTML 语义 一章中阅读更多关于语义元素的内容。

HTML 布局技巧

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

• CSS frame 框架
• CSS float 浮动布局
• CSS flexbox 盒子
• CSS grid 网格

CSS 框架

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

CSS Float 浮动布局

使用 CSS float 属性进行整个 web 布局是很常见的。

float 很容易学习-您只需要记住：float和 clear属性是如何工作的。

CSS Flexbox 布局

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

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

CSS Grid 网格布局

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

在 CSS 网格视图 一章中了解更多关于CSS网格的信息。