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>
解释：
示例演示了如何在段落中使用行内元素。span 元素用来突出显示文本，并且不会改变行内文本的布局。
四、常规流布局中的常见问题
在使用常规流布局时，我们可能会遇到一些常见的问题，包括：
- 元素溢出： 当元素的内容超出其父容器的宽度时，内容会自动换行或溢出。这可以通过设置合适的宽度或使用
overflow属性来控制。 - 行高不一致： 不同的元素或内容可能导致行高不一致，这通常需要通过设置
line-height或调整内边距来解决。
如有表述错误及欠缺之处敬请指正补充。
