display：标签显示模式（重点）
目标：
1、理解标签显示的 3 种模式
2、3 种显示模式的特点以及区别
3、实现 3 种显示模式的相互转换
目录： 1、什么是标签显示模式？ 2、block-level：块级元素 3、inline-level：行内元素 4、inline-block：行内块元素 5、三种显示模式的区别 6、diaplay:标签显示模式转换
1、什么是标签的显示模式
什么是标签的显示模式？ 标签的显示模式就是标签以什么方式进行显示，比如div标签占一行，span标签一行可以写多个等等。作用： 了解标签的显示模式，在适宜的地方使用合适的标签，以便更好的完成网页。标签的类型（分类） 1、块标签（块元素） 2、行内标签（行内元素）
2、 block- level：块级元素
常见的块级元素有 h1~h6标签 p标签 div标签 ul标签 ol标签 li标签 等。
特点： 1、块级元素自己独占一行。 2、宽度默认是容器的100%。 3、宽度、高度、内边距和外边距都可以控制。 4、是一个盒子容器，里面可以放行内元素和块级元素。注意： 文字类块级标签（p, h1~h6, dt）内不能存放其他块级标签。
3、inline-level：行内元素
常见的行内元素有a, strong, b, em, i, del, s, ins, u, span等。
特点 1、一行可以显示多个行内元素。 2、直接对行内元素设置宽、高是无效的。 3、默认宽度就是它本身内容的宽度。 4、行内元素只能容纳文本或者其他行内元素。
注意： 1、链接里面不能再放链接。 2、特殊情况下 a标签 可以容纳块级元素，但还是给 a标签 转成块级模式比较保险。
4、inline-block:行内块元素
在行内元素中有几个特殊的标签：img、input、td，可以对它们设置宽高以及对称属性，因此它们也被称为行内块元素。
特点： 1、和相邻的行内块元素（行内元素）在一行上显示会有空白间隙，一行可以显示多个。 2、默认宽度就是它本身内容的宽肃。 3、高度、宽度、行高、外边距以及内边距都可以控制。
5、三种显示模式的区别
6、display：标签显示模式转换
块级元素转行内元素：display:inline;行内元素转块级元素：display:block;块级元素和行内元素转换为行内块元素：display:inline-block;案例
<div class="demo5">块转行
</div>
<div class="demo5">块转行
</div>
<span class="demo6">行转块
</span>
<span class="demo6">行转块
</span>
<div class="demo7">块转行内块
</div>
<div class="demo7">块转行内块
</div>
<span class="demo8">行转行内块
</span>
<span class="demo8">行转行内块
</span>
.demo5 {
display: inline
;
}
.demo6 {
display: block
;
}
.demo7 {
display: inline-block
;
}
.demo8 {
display: inline-block
;
}
注：转换后将获得转换元素的特点。
