CSS基础知识（三）-元素显示模式（块元素、行内元素、行内块元素）

概述
元素显示模式就是元素（标签）以什么样的方式进行显示。
HTML元素一般分为块元素和行内元素两种类型

块元素
常见的块元素有h1~h6、p、div、ol、ul、li等
块级元素特点：

1. 自己独占一行
2. 高度，宽度，内外边距都可以控制
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素

注意：

• 文字类的元素内不能使用块级元素
• p标签主要用于存放文字，因此p里面不能放块级元素
• 同理，h1~h6等都是文字类块级标签，里面也不能放其他块级元素

行内元素
常见的行内元素有span、a、strong、b、em、i、del等
行内元素特点：

1. 相邻行内元素在一行上显示，一行可以显示多个行内元素
2. 不可以设置高度，宽度
3. 宽度默认是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

注意：

• 链接里面不能再放链接
• 特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式更安全

行内块元素
常见的行内块元素有img、input、strong、td
行内块元素特点：

1. 相邻行内（行内块）元素在一行上显示，一行可以显示多个，但是他们之间会有空白缝隙（行内元素特点）
2. 宽度默认是它本身内容的宽度（行内元素特点）
3. 高度，宽度，内外边距都可以控制（块级元素特点）

元素之间的转换：

• 转为块元素： display:block;
• 转为行内元素： display:inline;
• 转为行内块元素： display:inline-block;