html中块元素、行内元素和行内块元素的区别

**html中有三种标签元素类型，分别是块元素、行内元素和行内块元素。
**
1.行内元素：
不会自动换行，多个行内元素可在同一行，不能设置宽（width）高（height）属性，多个行内标签默认从左至右排列。最典型行内标签< span >，其高宽由标签内容撑开。

2.块元素：
自动换行，每个块元素独占一行，可以设置宽高属性，多个块标签默认从上至下排列。最典型块标签< div >，多用于页面布局。

3.行内块元素：
同时具有行内元素和块元素的特征，不能自动换行，但可以设置宽高属性，默认排列方式从左至右。如标签< img >。

常见行内元素：< span >、< a >、< strong >、< b> 、< em >、< I >、< del >、< u >
常见块元素：< div >、< h1 >…< h6 >、< p >、< table >、< form >、< ul >、< ol >、< dl >、< tr >、< body >
常见行内块元素：< img />、< input />、< td>

三种类型元素可通过display属性转换：
（1）display : block ; 转换为块元素
（2）display : inline ; 转换为行内元素
（3）display : inline-block ; 转换为行内块元素

标签的嵌套规范
（1）行内标签只能嵌套行内标签
（2）块标签可嵌套块标签、行内标签、行内块标签
（3）行内块标签可嵌套行内标签和行内块标签
注意：
有一些块标签不能嵌套块标签，如< hn >, < caption >,< p >,< hr >,< dt >
在浏览器中，如果< p >标签内嵌套了< div >标签，会自动给< p >标签加上结束标签，< div >会产生一个新的行，如下代码

会变成