作用：网页的标签很多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素的显示模式就是元素（标签）以什么方式来显示，比如<div>自己占一行，比如一行可以放多个<span>。

HTML元素一般分为块元素和行内元素两种类型。

一、块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>就是最典型的块元素。

块元素特点：

1、自己独占一行

2、高度、宽度、外边距以及内边距都可以控制

3、宽度默认是容器（父级宽度）的100%

4、是一个容器盒子，里面可以放行内或者块级元素，⚠️文字类元素内不能使用块元素，如：<h1>~<h6>、<p>

二、行内元素

常见的行内元素有<a>、<stong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素，行内元素也称为内联元素。

行内元素特点：

1、相邻行内元素在一行显示，一行可以显示多个。

2、高、宽直接设置是无效的。

3、默认高度就是它本身内容的高度。

4、行内元素只能容纳文本或其他行内元素，⚠️链接里面不可以再放链接，<a>里面可以放块级元素

三、行内块元素

在行内元素中有几个特殊的标签——<img>、<input>、<td>，他们同时具有块元素和行内元素的特点。

行内块元素特点：

1、和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙

2、默认宽度就是它本身内容的宽度

3、高度、宽度、外边距以及内边距都可以控制

四、显示模式的转换-display

一个模式的元素需要另一种模式的特性，比如增加链接<a>的触发范围。

把行内元素转换成块级元素          display:block;

把块级元素转换成行内元素          display:inline;

把其他元素转换成行内块元素      display:inline-block;

<style>

        a{

            width: 200px;

            height: 50px;

            background-color: yellow;

            display: block;

        }

    </style>

------------------------------------------------------------------------

<a href="#">一个链接</a>

单行文字垂直居中

CSS没有提供直接方法让文字垂直居中

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

行高     line-height