HTML行内元素、块状元素、行内块元素的区别

HTML可以将元素分类方式分为行内元素、块状元素和行内块元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：

1 display:inline; 转换为行内元素

2 display:block; 转换为块状元素

3 display：inline-block; 转换为行内块元素

<head>
   <meta charset="utf-8" />
  <title>测试案例</title>
    <style type="text/css">
      span {
             display: block;
         width: 120px;
           height: 30px;
           background: red;
        }
       
      div {
          display: inline;
             width: 120px;
            height: 200px;
           background: green;
        }
         
         i {
             display: inline-block;
             width: 120px;
             height: 30px;
          background: lightblue;
        }
   </style>
</head>
<body>
    <span>行内转块状</span>
     <div>块状转行内 </div>
    <i>行内转行内块状</i>
 </body>