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

红太狼 2022-02-09 11:01 293阅读 0赞

#### 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)行内块级元素 ####

##### 特点： #####

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

##### 常见行内块级元素： #####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]

#### 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;
    		}

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]

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

--------------------

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

--------------------

也没有独占一行(之所以有换行是因为后面的位置不够，所以第三个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;
    		}

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 2]

##### 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>

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 3]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]: /images/20220206/71f054d40a994b4a83e0c2d01d954da5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]: /images/20220206/4c5221c38ee44b3e91d148d0c8053576.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 2]: /images/20220206/1d651ef648854f10b73c4ac9fd854d3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 3]: /images/20220206/cb7cd035c7f4407a9ecddb12ba4d8c37.png