HTML 布局

category: HTML / CSS

网站通常以多栏形式显示内容（如杂志或报纸）。

HTML 布局元素

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

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

HTML 布局技术

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

• CSS框架
• CSS 浮动属性
• CSS 弹性盒
• CSS 网格

CSS 框架

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

CSS 浮动布局

使用 CSS 属性进行整个 Web 布局是很常见的float。 Float 很容易学习 - 你只需要记住float和clear属性是如何工作的。 缺点：浮动元素与文档流绑定，这可能会损害灵活性。

CSS Flexbox 布局

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

CSS 网格布局

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