HTML中元素类型及元素类型的转换_html元素之间的转换-CSDN博客

本文链接：https://blog.csdn.net/liu0218/article/details/126103054

本文详细介绍了HTML中的三种基本元素类型：块级元素、内联元素和行内块元素。块级元素占据整行，如`div`和`h1`，可以设置高度和宽度；内联元素如`a`和`span`，不占满行，可以与其他元素并排显示，但不能设置宽高；行内块元素如`img`，可以在行内显示并设置尺寸。此外，还讲解了如何通过`display`属性转换元素类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 块级元素：

不可以设置宽度高度
可以与其它内联标签，文字或图片在同一行
盒模型不能正常使用，上下失效，左右[生效]!

块级元素常见有：div、h1~h6、p、ul、dl、ol 、form等

例：

<style>
   div{
      height: 110px;
      background-color: red;
      }
</style>
<body>
    <div></div>
</body>

2.内联元素(行内元素)：

不可以设置宽度高度
可以与其它内联标签，文字或图片在同一行
盒模型不能正常使用，上下失效，左右生效!

内联元素常见有：a、span、i、u、b等

例：

<style>
 a{
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 20px; 
    padding: 20px;
 }
</style>
<body>
 <a href="#">内联元素</a>
</body>

tip：行内元素之间如果有换行符，浏览器会解析成一个空格，2属性之间会有间隙，2个元素写在一行就不会用这种情况，例如：

<a href="#">2132</a>
<span>312312</span>

显示效果：

3.行内块元素(可变元素)：

可以设置宽度高度
可以与文字内容在一行
可以正常使用盒模型

行内块常见的元素有：img、input

例：

<style>
 img{
     width: 300px;
     height: 400px;
     margin: 50px;
   }
</style>
<body>
	<img src="./image/简立方项目-首页_82.jpg" alt="">
</body>

4.元素类型的转换

通过display属性进行元素类型的转换，它的常见值有：

block：块元素
inline：行内元素
inline-block：行内块元素
none：隐藏该元素，让浏览器不解析该元素
flex：弹性盒子