前端学习笔记_006_display：标签显示模式

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;
• 案例

	<!-- HTML块级元素转行内元素 -->
		<div class="demo5">块转行</div>
		<div class="demo5">块转行</div>
		
		<!-- HTML行内元素转块级元素 -->
		<span class="demo6">行转块</span>
		<span class="demo6">行转块</span>
		
		<!-- HTML块级元素转行内块元素 -->
		<div class="demo7">块转行内块</div>
		<div class="demo7">块转行内块</div>
		
		<!-- HTML行内元素转行内块元素 -->
		<span class="demo8">行转行内块</span>
		<span class="demo8">行转行内块</span>

/* CSS转为行内元素 */
.demo5 {
	display: inline;
}

/* CSS转为块级元素 */
.demo6 {
	display: block;
}

/* CSS转为行内块元素 */
.demo7 {
	display: inline-block;
}

/* CSS转为行内块元素 */
.demo8 {
	display: inline-block;
}

注：转换后将获得转换元素的特点。