【25】CSS核心样式（5）——显示模式(display)（上）补充知识：标准文档流

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115347029

在讲显示模式之前，需要补充相关《标准文档流》知识：

在这里插入图片描述

思考：

在我们遇到的 HTML 元素中，有的标签元素如<div>、<p>等在浏览器中加载时必须独自占满一行，有的标签元素如<a>、<span>等则不会独占一行，原因是什么?

原因就在于：html是一种标准文档流文件。

一、标准文档流定义

• 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式；前面内容发生了变化，后面的内容位置也会随着发生变化。
• HTML就是一种标准文档流文件。
• HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。

二、HTML中的标准文档流特点的两种体现方式

1.微观现象

①空白折叠现象；

具体点击查看：【3】HTML基础（1）——认识。
其中三、基本语法（二）HTLM元素2.元素特性（2）空白折叠现象

②文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>微观现象_文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果</title>
  <style>
  </style>
</head>
<body>
  <div>
    <span>这是一小段文字</span>
    <a href="#">这是超级链接</a>
    <img src="前端学习/博客/tu/cat.jpg" alt="">  <!--这个路径自己写的时候改成自己的图片位置哦-->
    <input type="search">
  </div>
</body>
</html>

在这里插入图片描述

③自动换行，元素内一行内容写满元素的 `width` 时会自动进行换行。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>微观现象_自动换行，元素内一行内容写满元素的 `width `时会自动进行换行</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div>
    <span>这是一小段文字</span>
    <a href="#">这是超级链接</a>
    <img src="前端学习/博客/tu/cat.jpg" alt=""><!--这个路径自己写的时候改成自己的图片位置哦-->
    <input type="search">
  </div>
</body>
</html>

在这里插入图片描述

2.元素等级

• 在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素等。
• 块级元素：大部分容器级标签包括p标签都是块级元素，比如<div> 、 <h1> 等。
• 行内元素：大部分的文本级标签，比如 <span> 、 <a> 、 <b> 等。
• 行内块元素：比如 <img> 、 <input> 等。
• 各种等级的元素有自己的加载特点。