CSS的显示模式(块元素、行内元素，行块级元素)

CSS的显示模式

显示模式的定义：元素以什么方式进行显示。
作用：不同地方会用到不同类型的标签，了解他们会更好的布局网页。

元素显示模式的分类
一. 块元素
特点：

1. 内容独占一行
2. 宽、高、内边距、外边距都可以设置
3. 默认宽度是父级宽度的100%
4. 它是一个容器盒子，里面可以放块级元素或者行内元素
5. <div≷最典型的块级标签
   例如：‘<div≷,<p>,<ul>,<li>,<ol>,<h1>~<h6>’
   注意：文字类块级元素标签不能嵌套块级元素标签.
   （ 例如：‘<p>,<h1>~<h6>’）

二. 行内元素（内联元素）

特点：

1. 和相邻行内元素在一行上，一行可以显示多个
2. 宽、高、内边距、外边距不可以控制
3. 默认宽度是其自身内容的宽度
4. 行内元素只能容纳文本或其他行内元素
5. >span<是最典型的行内元素
   例如：<span>,<a>,<i>,<em>,<strong>,<u>,<del>,<ins>,<s>
   注意：<a>链接里面不能放链接,特殊情况链接里面可以放块级元素，但是给’<a>’转换一下块级模式更安全.

三. 行内块元素

特点：

1. 和相邻行内元素在一行上，但是他们之间会有白色空隙
2. 一行可以显示多个（行内元素特点）
3. 默认宽度是其自身内容的宽度（行内元素特点）
4. 高度、行高、外边距、内边距都可以设置（块级元素的特点）
   例如：‘<input />,<img />,<td>’

元素显示模式的转换

一个模式的元素需要另外一种模式的特性，比如想要增加‘<a>’链接的触发范围

转换方式：

• 转换为块元素：display:block
• 转换为行内元素：display:inline(不常用)
• 转换为行内块元素：display:inline-block