★文章内容学习来源：拉勾教育大前端就业集训营

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

思考：

在我们遇到的 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> 等。
• 各种等级的元素有自己的加载特点。

（1）块级元素

a、块级元素可以设置宽高，在浏览器中正常加载；
b、块级元素必须独占一行，不能与其他任何标签并排一行；
c、块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内容自动撑开高度。

（2） 行内元素

a、行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题；
b、行内元素可以与其他的行内或行内块元素并排一行显示；
c、行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。

（3）行内块元素

a、行内块元素可以设置宽度和高度；
b、行内块元素可以与其他的行内或行内块并排一行显示；
c、行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开；
d、行内块依旧具有标准流的微观性质，例如空白折叠现象。

下篇继续：【26】CSS核心样式（5）——显示模式(display)（下）