【CSS|第2期】探索HTML与CSS中的文档流：从自然流到高级布局技巧

日期：2024年9月9日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉在这里插入代码片得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

文章目录

一、前言
二、什么是自然文档流？
三、跨越自然流：探索其他文档流
- 1. 浮动文档流（Floating Document Flow）
- 2. 定位文档流（Positioned Document Flow）
- 3. Flexbox布局
- 4. Grid布局
四、结语

在这里插入图片描述

一、前言

在网页设计与开发的世界里，理解文档流是掌握布局艺术的关键。今天，我们就来深入探讨 HTML 与 CSS 中的文档流，包括它的自然形式以及其他几种强大的布局模式。

二、什么是自然文档流？

在 CSS 世界中，自然文档流（Normal Document Flow）是最为基础的布局方式。它遵循元素在 HTML 文档中的出现顺序进行布局，自上而下、从左到右。

块级元素（Block-level elements）：如 <div>, <p>, <h1>-<h6> 等会独占一行，从上到下一个接一个垂直排列，每个元素的宽度默认为容器的 100%。，而高度则由内容决定。
行内元素（Inline elements）：如 <span>, <a>, <img> 等则会在同一行内水平排列，直至行满才换行。
相对定位元素（Position: relative）：虽然可以相对于其正常位置进行移动，但仍然保留在文档流中。

这种布局方式是构建网页布局的基石，它保证了内容的自然阅读顺序。想象一下，你在阅读一本书。每一页上的文字都是按顺序排列的，这就是自然文档流的直观比喻。文字（行内元素）从左到右流动，当到达页面边缘时，就会移到下一行继续。而章节标题（块级元素）则总是独占一行，位于页面的顶部。

三、跨越自然流：探索其他文档流

虽然自然文档流简单直观，但有时候我们需要更精细的控制。这就引出了几种其他的文档流模式。

1. 浮动文档流（Floating Document Flow）

通过设置元素的 float 属性（如 float: left; 或 float: right;），可以让元素脱离自然文档流，从而能够向左或向右浮动，直到其外边缘碰到包含框或另一个浮动元素的边缘为止，并且允许文本和内联元素环绕在浮动元素周围。浮动元素虽然脱离了常规的文档流，但仍然会影响其后面的块级元素布局

比如，在制作一个图文混排的新闻列表时，你可以让图片浮动在文本旁边，从而实现紧凑且易于阅读的布局。

<div style="border: 1px solid black;">
  < img src="image.jpg" style="float: left; width: 50px; height: 50px;">
  <p>这是一个段落，图片会浮动在段落的左边。</p >
</div>

2. 定位文档流（Positioned Document Flow）

通过设置元素的 position 属性（如 position: static; 或 position: absolute; 或 position: fixed; 或 position: sticky;），可以让元素完全脱离文档流，并可以使用 top, right, bottom, left 属性来精确定位。

absolute 和 fixed 定位的元素会相对于其最近的已定位祖先元素或视口进行定位，并且不会占据原位置的空间。
static：默认值，元素遵循自然文档流。
absolute：相对于最近的非static定位的祖先元素进行绝对定位。
fixed：相对于浏览器窗口固定位置，不随页面滚动而移动。
sticky：定位是一种相对定位和固定定位的混合，根据用户的滚动位置变化其定位状态

另外值得指出的是，position: relative; 虽然可以相对于其正常位置进行移动（微调），但仍然保留在文档流中，因此我将其归类为 自然文档流 。

设想一个固定在屏幕顶部的导航栏，无论用户如何滚动页面，它始终可见。这就是fixed定位的典型应用。

.absolute {
  position: absolute;
  top: 0px;
  right: 0;
  width: 150px;
  height: 100px;
}

<div class="absolute">简易导航栏（当行子项假定实现了）</div>

3. Flexbox布局

Flexbox 布局提供了一种更加灵活的方式来排列和对齐元素。使用 Flexbox，我们可以轻松地实现水平和垂直居中，以及响应式布局。

特点
- 容器内的项目可以沿主轴或交叉轴排列。
- 可以轻松实现复杂的布局需求。

示例

.flex-container {
 display: flex;
 justify-content: space-between;
}
.flex-item {
 width: 100px;
 height: 100px;
 background-color: lightpink;
}

<div class="flex-container">
 <div class="flex-item">Flex Item 1</div>
 <div class="flex-item">Flex Item 2</div>
 <div class="flex-item">Flex Item 3</div>
</div>

4. Grid布局

CSS Grid 布局是一种强大的布局系统，它允许开发者通过创建一个由行和列组成的二维网格来对页面进行布局。Grid 布局使得对齐和分布元素变得非常简单，尤其是在设计复杂的页面布局时。

特点
- 可以同时控制行和列。
- 容器元素通过display: grid;声明变为一个网格容器。
- 可以定义网格线的名称，并通过网格线对齐项目。
- 子元素可以使用grid-column和grid-row属性来跨越多个网格轨道。

示例

以下是 Grid 布局的完整示例代码，它创建了一个三列的网格，每个网格项都有背景色、内边距和文本居中。

.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr); /* 创建三列，每列占据相等的空间 */
 gap: 10px; /* 网格项之间的间隙 */
}

.grid-item {
 background-color: lightsalmon; /* 网格项的背景色 */
 padding: 10px; /* 网格项的内边距 */
 text-align: center; /* 文本居中 */
}

<div class="grid-container">
  <div class="grid-item">Grid Item 1</div>
  <div class="grid-item">Grid Item 2</div>
  <div class="grid-item">Grid Item 3</div>
  <!-- 可以继续添加更多网格项 -->
</div>