HTML用css进行元素类型转换

• 1.HTML元素分为三类：行级元素、块级元素、行内块级元素

①块级元素：能设置宽高，不能和其他元素呆在一行。

常见的有：div，所有的布局元素，h1-h6，p，ul，li...

②行级元素：不能设置宽高，能和其他元素呆在一行 

常见的有：a，span，stong，b，i，sub，sup...

③行内块级元素：能设置宽高，也能和其他元素待在一行。

常见的有：img，input，video，audio...

• 2.标签嵌套：

①块级元素可以嵌套块级元素、行级元素、行内块级元素

1         <div><div>div><h1>h1><p>p>div>
2         <div><span>span><a>a><b>b>div>
3         <div><img src="" alt=""/>div>

h1-h6,p：不能嵌套块级元素

②行级元素不能嵌套块级元素，如果嵌套，需要把行级元素转换为块级元素再嵌套

<a><span>span><img src="" alt=""/>a>

③行内块级元素只能嵌套行级元素

<video><span>span>video>

• 3.任何元素都能进行元素类型转换（display:）。元素类型之间可以相互转换，元素类型转换不会影响自身的性质

转为块级元素：display:block;

转为行级元素：display:inline;

转为行内跨级元素：display:inline-block;