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

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>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Talk is easy,show me the code!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Talk is easy,show me the code!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 快级元素转为行内块级元素 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline-block<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Talk is easy,show me the code!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline-block<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Talk is easy,show me the code!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline-block<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Talk is easy,show me the code!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline-block<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Talk is easy,show me the code!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>

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

		.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="">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 转为块级元素 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>surprice.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-img<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>surprice.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-img<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

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

	.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>
<span class="token comment">&lt;!-- 转为行内块级元素 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>i-inine_block<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Talk is easy, show me the code!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>i-inine_block<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Talk is easy, show me the code!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 转为块级元素 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>i-block<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Talk is easy,show me the code!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>i-block<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Talk is easy,show me the code!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>	

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

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