块级元素、行内元素和行内块元素如何转换、有何特点

元素之间是如何转换的：

• 变为块级元素（独占一行，可控）：display: block;
• 变为行内元素（不会独占一行，不可控）：display: inline;
• 变为行内块元素（可设置宽高，margin,padding）：display: inline-block;

元素之间的区别（特点）：

一、块级元素：

1. 每个块级元素都独占一行。
2. 元素的宽度、高度、行高及顶部和底部边距可以设置。
3. 元素宽度在不设置的情况下，和它父元素的宽度一致。

   常用的块级元素有：div , p , h1~h6 , ol , ul , dl , form , table , address …

二、行内元素：

1. 和其它元素都在一行上。
2. 元素的宽度、高度及顶部和顶部边距都不能设置。
3. 元素的宽度就是它所包含的文字或图片的宽度，不可修改。

   常用的行内元素有：span , br , a , em , b , i , strong …

三、行内块元素（同时具备行内元素、块级元素的特点）：

1. 和其它元素都在一行上。
2. 元素的宽度、高度、行高及顶部和底部边距可以设置。

   常用的行内元素有：img , input , td

本文地址：https://blog.csdn.net/December_shi/article/details/107472738