CSS显示模式详解-CSDN博客

本文链接：https://blog.csdn.net/m0_71380478/article/details/128794795

1、块显示模式

块显示模式独占一行，可改变宽高，代表标签有：div，p，h系列等

<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>
    <style>
      .kuai{
      width: 100px;
      height: 100px;
      background-color: blue;
      }
    </style>
</head>
<body>
    <div class="kuai"> 
       div是一个块级标签
    </div>
    <div class="kuai">
       div是一个块级标签
    </div>
</body>

运行结果：

在这里插入图片描述

2、行内显示模式

行内显示模式一行可以显示多个，不可改变宽高，代表标签有a，span等

<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>
    <style>
      .hang{
      width: 100px;
      height: 100px;
      background-color: pink;
      }
      
    </style>
</head>
<body>
    <a href="#" class="hang"> 
       a是一个行内标签
    </a>
    <a href="#" class="hang">
       a是一个行内标签
    </a>
   
</body>

运行结果：

在这里插入图片描述

3、行内块显示模式

行内块显示模式一行可以显示多个，可改变宽高，代表标签：input，textarea等

<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>
    <style>
      .hangneikuai{
      width: 100px;
      height: 100px;
      background-color: pink;
      }
      
    </style>
</head>
<body>
    input标签是一个行内块标签<input type="text" class="hangneikuai">
    input标签是一个行内块标签<input type="text" class="hangneikuai">
   
</body>

运行结果：

在这里插入图片描述

4、模式之前的转换

转换为块模式：display：block；转换为行内模式：display：inline；转换为行内块模式：display：inline-block

a.块转行内块和行内

<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>
    <style>
      .zhuanhuan{
      width: 100px;
      height: 100px;
      background-color: pink;
      display: inline;
      }
      
    </style>
</head>
<body>
   <div class="zhuanhuan">
    第一个div标签
   </div>
   <div class="zhuanhuan">
    第二个div标签
   </div>
   
</body>

运行结果：

在这里插入图片描述

<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>
    <style>
      .zhuanhuan{
      width: 100px;
      height: 100px;
      background-color: pink;
      display: inline-block;
      }
      
    </style>
</head>
<body>
   <div class="zhuanhuan">
    第一个div标签
   </div>
   <div class="zhuanhuan">
    第二个div标签
   </div>
   
</body>

运行结果：

在这里插入图片描述

b.行内转块和行内块

<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>
    <style>
      .zhuanhuan{
      width: 100px;
      height: 100px;
      background-color: pink;
      display:block;
      }
      
    </style>
</head>
<body>
   <a href="#" class="zhuanhuan">
    第一个a标签
   </a>
   <a href="#" class="zhuanhuan">
    第二个a标签
   </a>
   
</body>

运行结果：

在这里插入图片描述

<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>
    <style>
      .zhuanhuan{
      width: 100px;
      height: 100px;
      background-color: pink;
      display:inline-block;
      }
      
    </style>
</head>
<body>
   <a href="#" class="zhuanhuan">
    第一个a标签
   </a>
   <a href="#" class="zhuanhuan">
    第二个a标签
   </a>
   
</body>

运行结果：

在这里插入图片描述

c.行内块转块

<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>
    <style>
      .zhuanhuan{
      width: 100px;
      height: 100px;
      background-color: pink;
      display:block;  
      }
      
    </style>
</head>
<body>
  第一个input标签<input type="text" class="zhuanhuan">
  第二个input标签<input type="text" class="zhuanhuan"> 
</body>