详解块级元素、行内元素、行内块级元素类型、区别及相互转化
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>
前两行不做改变，第三、四行转为行内块级元素，第五、六行转为块级元素，此时在浏览器中的显示效果为：
可以看到行内元素不能独占一行，且设置外边距无效；行内块级元素也不能独占一行，但能够设置外边距；块级元素即独占一行，也能够设置外边距。