HTML、CSS与元素转换：布局基石详解-CSDN博客

本文链接：https://blog.csdn.net/qq_45059691/article/details/125749434

hello，大家晚上好，今天让我们继续学习标签的重要部分，在今天我会详细介绍一下元素的相关知识，希望大家和我一起共同学习，那么，接下来就开始吧。

1.1块元素和行内元素以及行内块元素

首先，我们来学习HTML中非常重要的一个知识点，块元素和行内元素以及行内块元素，这三个元素贯穿我们后期整个HTML学习的过程，所以作为非常重要的知识点我放在第一位说，接下来我会详细介绍三者的区别以及使用方法：

（1）块元素：块元素一般用来布局，它有两个特点，第一个，在最终显示在浏览器上的时候，它会独占一行；第二点，块元素可以自行设置宽度和高度，在不主动设置的时候，其宽度默认是与父元素相同的，其高度默认是被内容撑开的。

常见的块元素有：div p h1~h6 ul ol li table hr adress header main footer nav 等，前几个用途较为多。

（2）行内元素：行内元素听其名字就可以知道，它的第一个特点就是在显示在浏览器上面的时候，不会独占一行，自左向右排列，如果满了会自动转行；第二个特点就是其不可自定义宽度和高度，默认情况下宽高都是被内容撑开的，所以行内元素一般用来做内容填充使用。

常见的行内元素有：a span em strong del i s lable input q u等。

（3）行内块元素：行内块元素非常厉害，它兼具了块元素和行内元素的特点，既不会独占一行，也可以自由设置宽度和高度，就是常见类型有些少。、

常见的行内块元素有：img

注意：

1.块元素里面什么都可以放，能放块元素，能放行内元素，也可以放行内块元素；

2.行内元素内部不可以放块元素；

3.p标签是一个特殊的块元素，其内部不可以放块元素；

4.a标签是一个特殊的行内元素，其内部什么元素都可以放，但是不可以放自己。

1.2各个元素之间的转换

这时候肯定有朋友问了，既然行内快元素这么好，兼具两者的优点，既可以更改宽高又不会独占一行，那么可不可以将难搞的行内元素转换为行内快元素？答案是当然可以，三种元素之间支持自由转化，需要的是一个神秘的叫做display属性，它可以实现三者之间的转换，其后面的可选值为block（块元素），inline（行内元素）和inline-block（行内块元素）。

下面我来展示一下元素之间如何转换，为了方便观察，我就以行内元素转化为块元素为例，因为转化完成后的行内元素也可以进行宽高的设置，非常实用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.baidu.com/">百度</a>
    <span>你骨朗传是夹极同才。</span>
    <strong>子足航分自锐，一同血国头月皇。</strong>
  </body>
</html>

以上是三个简单的行内元素标签，a超链接标签，span标签以及strong强调标签，运行以后如下图所示：

可以看到由于三个都是行内元素，所以它们都在一行，接下来，我们在head标签下添加一个style标签，然后在其内部把span这个行内元素用display变为块元素，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    span {
      display: block;
    }
  </style>
  <body>
    <a href="https://www.baidu.com/">百度</a>
    <span>你骨朗传是夹极同才。</span>
    <strong>子足航分自锐，一同血国头月皇。</strong>
  </body>
</html>

其运行结果如下图所示：

可以看到由于span变为块元素，所以其独占一行，使得a标签和strong标签的文字被挤开为其上下行，然后，我们在给span设置一个高度，使中间的文字上下间距更大：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    span {
      display: block;
      height: 50px;
      line-height: 50px;
    }
  </style>
  <body>
    <a href="https://www.baidu.com/">百度</a>
    <span>你骨朗传是夹极同才。</span>
    <strong>子足航分自锐，一同血国头月皇。</strong>
  </body>
</html>

运行结果如下图所示：