常规流布局（补充）—

本文主要是介绍常规流布局（补充）——WEB开发系列30，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

CSS（层叠样式表）作为现代网页设计的基础之一，其布局功能一直是开发者关注的重点。了解CSS常规流布局是掌握网页布局的第一步。

一、什么是常规流布局？

常规流布局（Normal Flow Layout）是CSS布局的基础，也是网页布局的默认方式。在常规流中，所有的元素都按照文档中的顺序依次排列。这种布局方式非常直观，可以帮助我们理解各种布局模式的基础。常规流布局包括块级元素（Block-level Elements）和行内元素（Inline Elements）的布局方式。

块级元素（Block-level Elements）

块级元素是指那些会在新的一行开始显示的元素。这些元素通常会占据父容器的整个宽度，直到遇到下一个块级元素或容器的边缘。常见的块级元素包括 <div>、<p>、<h1>、<section>、<article> 等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Block-Level Elements Example</title><style>.block {background-color: lightblue;margin: 10px;padding: 10px;}</style>
</head>
<body><div class="block">这是第一个块级元素</div><div class="block">这是第二个块级元素</div><div class="block">这是第三个块级元素</div>
</body>
</html>

解释：

在这个示例中的三个 div 元素被定义为块级元素。它们每个都在新的一行上显示，具有相同的背景色、边距和内边距。每个 div 元素都占据了父容器的整个宽度，除非有其他元素阻止其占据更多空间。

行内元素（Inline Elements）

行内元素是在同一行中排列的元素，它们只占据其内容的宽度，不会强制换行。常见的行内元素包括 <span>、<a>、<strong>、<em> 等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Inline Elements Example</title><style>.inline {background-color: lightcoral;margin: 5px;padding: 5px;}</style>
</head>
<body><p>这是一个段落，其中包含<span class="inline">行内元素1</span>和<span class="inline">行内元素2</span>的例子。</p>
</body>
</html>

解释：

示例中两个 span 元素被定义为行内元素。它们显示在同一行中，与周围的文本混合在一起。即使这些 span 元素具有背景色、边距和内边距，它们也不会影响其他行内元素的布局。

二、常规流布局的计算规则

在常规流布局中，元素的排列方式遵循以下规则：

块级元素的排列

从上到下排列： 块级元素会从上到下排列，每个块级元素的起始位置都会在新的一行上。它们的宽度默认是父容器的全宽。
宽度和高度： 块级元素的宽度可以被调整，通常是通过 width 属性设置。默认情况下，高度会根据内容的大小自适应。

行内元素的排列

从左到右排列： 行内元素会从左到右排列，并在同一行中显示。它们的宽度和高度通常由内容决定。
行内换行： 当行内元素的总宽度超出父容器的宽度时，会自动换行。

三、实际应用中的常规流布局

在实际应用中，常规流布局经常用于创建简单的页面布局，如文章段落、列表等。以下是一些常见的布局示例：

示例 1：基本页面布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Basic Page Layout</title><style>header, footer {background-color: lightgray;padding: 10px;text-align: center;}main {margin: 10px;padding: 10px;}article {background-color: lightyellow;margin: 10px 0;padding: 10px;}</style>
</head>
<body><header>网站标题</header><main><article>第一篇文章</article><article>第二篇文章</article></main><footer>网站底部</footer>
</body>
</html>

解释：

示例展示了一个简单的网页布局，包括头部、主体和底部。header、main 和 footer 都是块级元素，按顺序从上到下排列。article 元素也是块级元素，用于展示文章内容。

示例 2：内联元素的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Inline Elements Usage</title><style>.highlight {background-color: yellow;padding: 2px;}</style>
</head>
<body><p>这是一段包含<span class="highlight">突出显示</span>的文本，展示了行内元素的效果。</p>
</body>
</html>