详解块级元素、行内元素、行内块级元素类型、区别及相互转化

1)块级元素

特点：

1.总是从新的一行开始

2.高度、宽度都是可控的

3.宽度没有设置时，默认为100%

4.块级元素中可以包含块级元素和行内元素

5.块级文字元素中不能放入其他块级元素

6.块级大多为结构性标记

常见块级元素：

 <center>... 
     center> 地址文字 <h1>... 
      h1> 标题一级 <h2>... 
       h2> 标题二级 <h3>... 
        h3> 标题三级 <h4>... 
         h4> 标题四级 <h5>... 
          h5> 标题五级 <h6>... 
           h6> 标题六级 <hr> 水平分割线 <p>... 
            p> 段落 <pre>... 
             pre> 预格式化 <blockquote>... 
              blockquote> 段落缩进 前后5个字符 <marquee>... 
               marquee> 滚动文本 <ul>... 
                ul> 无序列表 <ol>... 
                 ol> 有序列表 <dl>... 
                  dl> 定义列表 <table>... 
                   table> 表格 <form>... 
                    form> 表单 <div>... 
                     div> 

2)行内元素

特点：

1.和其他元素都在一行

2.高度、宽度以及内边距都是不可控的

3.宽高就是内容的高度，依靠自身字体大小和图形支撑结构的，不可以改变

4.行内元素只能行内元素，不能包含块级元素

5.行内元素的paddding可以设置

6.margin只能够设置水平方向的边距，即：margin-left和margin-right，设置margin-top和margin-bottom无效

7.块级大多为结构性标记

常见行内标签:

特点：

1.和其他元素都在一行

2.高度、宽度以及内边距都是不可控的

3.宽高就是内容的高度，不可以改变

4.行内元素只能行内元素，不能包含块级元素

5.行内大多为描述性标记

 <b>... 
     b> 加粗 <strong>... 
      strong> 加粗 <sup>... 
       sup> 上标 <sub>... 
        sub> 下标 <i>... 
         i> 斜体 <em>... 
          em> 斜体 <del>... 
           del> 删除线 <u>... 
            u> 下划线 

3)行内块级元素

特点：

综合块级元素与行内元素的特性，可设宽高（默认是内容宽高），也可以设置内外边距

常见行内块级元素：

 <span>... 
     span> <a>... 
      a> <img/> <textarea>... 
       textarea> <button>.. 
        button> <input> <br> <label>... 
         label> <select>... 
          select> <canvas>... 
           canvas> <progress>... 
            progress> <cite>... 
             cite> <code>... 
              code> <strong>... 
               strong> <em>... 
                em> <audio>... 
                 audio> <video>... 
                  video> 

4)块级元素与行内元素完整列表：

5)显示模式转换

display:block|inline|inline-block

1)块级转行内、行内块级

  
    <h1 class="inline">Talk is easy,show me the code! 
     h1> <h1 class="inline">Talk is easy,show me the code! 
      h1> <h1 class="inline">Talk is easy,show me the code! 
       h1> <h1 class="inline">Talk is easy,show me the code! 
        h1> <hr>  
        <h1 class="inline-block">Talk is easy,show me the code! 
         h1> <h1 class="inline-block">Talk is easy,show me the code! 
          h1> <h1 class="inline-block">Talk is easy,show me the code! 
           h1> <h1 class="inline-block">Talk is easy,show me the code! 
            h1> 

将前两行转为行内元素，而将后两行转为行内块级元素：

 .inline{ 
    display: inline; background: #ccc; } .inline-block{ 
    display: inline-block; background-color: #ccc; } hr{ 
    height:5px; background: green; } 

在浏览器中的显示效果为：

可以看到，转为行内元素的

没有独占一行，垂直方向的外边距属性也消失了；而转为行内块级元素的

也没有独占一行(之所以有换行是因为后面的位置不够，所以第三个h1自动换行到了第三行)，但仍保持了垂直方向的外边距，这也说明了行内元素与行内块级元素的区别。

2)行内块级元素转为块级元素

  
      <img src="surprice.jpg" alt=""> <img src="surprice.jpg" alt=""> <hr>  
      <img src="surprice.jpg" alt="" class="block-img"> <img src="surprice.jpg" alt="" class="block-img"> 

前两行不做改变，而将后两行转为块级元素：

 .block-img{ 
      display: block; } 

在浏览器中的显示效果为：

3)行内元素转行内块级元素、块级元素

  
      <i class="i-inline">Talk is easy ,show me the code! 
       i> <i class="i-inline">Talk is easy ,show me the code! 
        i> <hr>  
        <i class="i-inine_block">Talk is easy, show me the code! 
         i> <i class="i-inine_block">Talk is easy, show me the code! 
          i> <hr>  
          <i class="i-block">Talk is easy,show me the code! 
           i> <i class="i-block">Talk is easy,show me the code! 
            i> 

前两行不做改变，第三、四行转为行内块级元素，第五、六行转为块级元素，此时在浏览器中的显示效果为：

可以看到行内元素不能独占一行，且设置外边距无效；行内块级元素也不能独占一行，但能够设置外边距；块级元素即独占一行，也能够设置外边距。