1. 简述

HTML 提供丰富的标签，这些标签被定义成了不同的显示模式：

是像 div 自己独占一行，或是像 span 一行可以占多个。

为了 不同场景应用不同显示模式，更好布局页面，我们需要系统学习元素的显示模式。

元素的显示模式分为三种：

块元素（

block ）

行内元素（

inline ）

行内块元素（

inline-block ）

下面我们来分别学习

2. 块元素-block

块元素：以区域块方式出现。每个块标签默认独占一整行区域。块结束会自动换行

常见的块元素：<h1>、<p>、<div>、<ul>等

块元素特点：

1、 独占一行（宽度默认是父元素的 100%），行末会自动换行

2、 盒子模型可以自由控制（宽、高、外边距、内边距）

3. 行内元素-inline

行内元素（内联元素）：根据内容多少来占用行内空间，不会自动换行

常见的行内元素：<span>、<a>等

行内元素特点：

1、 根据内容体多少来自动设置宽度，一行有多个，不会自动换行

2、 盒子模型中仅边框、内边距、左右外边距有效（宽、高、上下外边距无效）

4. 行内块元素-inline-block

行内块元素：同时具备块元素和行内元素的部分特点。

常见的行内块元素：<img>、<input>、<td> 等

行内块元素特点：

1、 根据内容体多少来自动设置宽度，一行有多个，不会自动换行

2、 盒子模型可以自由控制（宽、高、外边距、内边距）

注意：若需要调节 span 的盒子，可以将 span

5. 显示模式的转换

display 属性可以使得元素 在行内元素和块元素之间相互转换。

格式：（建议将 display 作为第一个属性）

选择器{display:属性值}

常用的属性值：

准备代码：

示例代码：

6. 清除-换行产生的空格

行内元素 或 行内块元素在代码中若有换行，在浏览器解析时，会变为一个空格显示。

解决方案：我们可以通过设置其父元素的字体大小为 0，将空格缩小到 0，不占用显示。

达到“清除“空格的目的

代码实现：