HTML显示模式（块元素、行内块元素、行内元素）

HTML显示模式

显示模式有三种：块元素、行内元素、行内块元素。

块元素

块级元素是指在HTML文档中使用时它们会以块的形式显示。

独占一行，可以设置宽高

块元素是比较常见的，很多,比如：div盒子，以及各种列表元素，p段落标签，h1标题元素等。

独占一行的意思是，无论块元素的宽为多少，都会默认元素占一行，虽然从外面看上去没有什么区别，但是当你在块元素下面再写一个标签时，会在下一行显示。

行内元素

行内元素是在一行内显示，并只占据必要的宽度的元素。

不独占一行,不可以设置宽高

一些常见的行内元素有：a标签，span标签。

行内元素不能包含块级元素，但可以包含其他行内元素或文本。可以通过使用CSS样式将行内元素设置为块级元素来改变它们的布局和表现。

html页面内容

css样式

.sp1 {
   width: 100px;
   height: 100px;
   background-color: antiquewhite;
}
.sp2 {
   background-color: aquamarine;
}

效果图如下：

你会发现你定义的两个span行内元素是看不到的，而且设置的宽高也没用。

这是因为行内元素本身就不能设置宽高，行内元素的宽高只会根据它里面的元素变化，而这里没有元素，所有它的宽高就为0了，因此你会看不到。 

当你改变html中的行内元素的内容时

111
222

你就可以看到内容被显现出来了，因为行内元素有了内容，行内元素的背景元素也随内容变化了 （我这里是把页面放大了，实际上的内容可能很小，因为页面默认的字体大小只有16px）。

行内块元素

HTML行内块元素是指可以在同一行内显示的块级元素。

不独占一行，可以设置宽高

这些元素可以通过设置宽度和高度来控制它们的大小，但是它们不会独占一行，而是根据内容自动调整大小并排列在一行中。它们通常用于创建按钮、图像、文本框和标签等UI元素。

img {
  width: 100px;
  height: 100px;
}

 你可以看到图片的长宽都为100px，且两个图片是相邻的，没有直接到下一行，因为行内块元素不独占一行，并且可以设置宽高（下面没有图片是因为我没有在img的src中导入图片）。

显示模式转换

在了解到三种显示模式后，在html页面实际编写中，我们可能需要显示模式的转换，例如：我想要a链接标签独占一行，这时候就需要转换了。

 

      标题1
      标题2
      标题3

 a {
        width: 100px;
        height: 50px;
        background-color: bisque;
}

你可以看到a标签是无法设置宽高的

这时候就需要一句， display: inline-block;——转化成行内块元素。

 a {
        display: inline-block;
        width: 100px;
        height: 50px;
        background-color: bisque;
 }

其他元素转化成块元素：display: block;

其他元素转化成行内元素：display: inline;