块级元素、行内元素和行内块元素的特点及转换方式

块级元素常见有：

div、p、ul、li、ol、dl、dt、dd、h1-h6标题、form、table等

块级元素的特点：

1. 总是从新行开始
2. 宽度默认是容器的100%
3. 高度、宽度、外边距、内边距都可以调整
4. 可以容纳内联元素和其他块元素。

    
    
    
    


    
块级元素1
    
行内元素
    
块级元素2

效果图：

行内元素常见的有：

sub(上标)、sup(下标)、img、i、span、a、em、u(下划线)、del(删除线）等

行内元素的特点：

1. 和相邻的元素处在同一行上
2. 宽和高的属性值是无效的，但是水平方向的padding和margin可以设置，垂直方向则无效。
3. 默认的宽度是本身内容的宽度。
4. 行内元素只能容纳文本或者其他的行内元素。（a比较特殊）

    
    
    
    


     
块级元素1
    行内元素1
    行内元素2 
    
块级元素2

效果图：

行内块元素常见有：

input、img、textarea、button、select等

行内块元素的特点：

1. 和相邻的行内块元素会在同一行上，但是中间会有点空隙。
2. 默认的宽度就是本身内容的宽度。
3. 高度、行高、外边距和内边距都能够控制。

效果图：

转换方式：

1. display:inline ; //块级标签模式转换为行内标签模式

    
    
    
    


    
块级元素1
    
块级元素2
 

效果图:

2. display:block; //行内标签模式转为块级标签模式

    
    
    
    


    行内元素1
        
        行内元素2 

 

效果图：

3.display:inline-block; //行内标签模式转为行内块标签模式

    
    
    
    


    行内元素1       
        行内元素2 

效果图：