行内元素、行内块元素、块级元素的相互转换

行内块元素

在行内元素中有几个特殊的标签一<img/>. <input/>. <td> ,它们同时具有块元素和行内元素的特点。
有些资料称它们为行内块元素。                                              

行内块元素的特点：

1、和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
2、默认宽度就是它本身内容的宽度(行内元素特点)。
3、高度、行高、外边距以及内边距都可以控制(块级元素特点)。
 

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

• 转换为块元素: display:block
• 转换为行内元素: display.inline;
• 转换为行内块: display: inline-block;