HTML 布局

在 HTML 中，布局通常指的是如何组织和排列页面上的元素，以便它们以期望的方式显示。HTML 提供了多种元素和属性来帮助我们实现页面布局，但仅仅使用 HTML 是不够的，因为它主要关注内容的结构和语义。为了更精确地控制布局，我们通常会使用 CSS（层叠样式表）。

以下是一些常见的 HTML 布局技术和策略：

流式布局（Flow Layout）：

这是 HTML 的默认布局模型。块级元素从上到下依次排列，内联元素则并排显示。

使用 <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li> 等元素可以创建基本的流式布局。

表格布局（Table Layout）：

虽然不推荐使用 HTML 表格进行页面布局（因为这不符合语义化原则），但在某些情况下，表格仍然是一种有效的布局方法。

使用 <table>, <tr>, <td>, <th> 等元素可以创建表格布局。

Flexbox布局（Flexible Box Layout）：

Flexbox 是一个现代的 CSS 布局模型，它允许你以不同的方向、顺序和对齐方式轻松地在不同屏幕尺寸上排列、对齐和分发空间。

使用 CSS 的 display: flex; 或 display: inline-flex; 属性可以启用 Flexbox 布局。

Grid布局（CSS Grid Layout）：

CSS Grid 是一个二维布局系统，可以同时处理行和列。它允许你定义网格容器和网格项，以及它们之间的关系。

使用 CSS 的 display: grid; 或 display: inline-grid; 属性可以启用 Grid 布局。

定位（Positioning）：

CSS 提供了多种定位机制，包括静态定位（默认）、相对定位、绝对定位、固定定位和粘性定位。

这些定位机制可以帮助你精确地控制元素在页面上的位置。

浮动（Floats）：

浮动元素会向左或向右移动，直到其外边缘碰到包含块或另一个浮动框的边框为止。

浮动通常用于文本环绕图像或创建多列布局。

媒体查询（Media Queries）：

媒体查询是 CSS3 的一个特性，它允许你根据设备的特性（如视口宽度、分辨率等）应用不同的样式规则。

这使得响应式布局成为可能，即页面布局会根据设备或屏幕尺寸自动调整。

Bootstrap等框架：

Bootstrap 等前端框架提供了一套预定义的 HTML、CSS和JavaScript 工具，用于快速构建响应式和移动优先的网站。

这些框架通常包含多种布局组件和样式，可以帮助你更快地创建复杂的页面布局。