CSS的元素显示模式与转换

CSS的元素显示模式与转换

1. CSS的元素显示模式

1.1 块元素

<div>标签是最典型的块元素。另外常见的块元素有h1~h6、p、ul、ol、li等。

特点：

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

注：文字类的元素内不能使用块级元素，例如p、h1~h6等。

1.2 行内元素(内联元素)

<span>标签是最典型的行内元素。另外常见的行内元素有a、strong、em、i、del、ins等。

特点：

1. 相邻行内元素在同一行上，一行可以显示多个
2. 高度、宽度直接设置是无效的
3. 默认宽度是它本身内容的宽度
4. 里面只能放文本或其它行内元素

注：

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

1.3 行内块元素

img、input、td标签同时具有块元素和行内元素的特点，称为行内块元素。

特点：

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

1.4 元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	父级元素的100%	可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	可以容纳文本或其它行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽度高度	它本身内容的宽度

2. CSS的元素显示模式转换

行内元素要先转换模式，才能设置宽度、高度。

转换为	样式
块级元素	display: block;
行内元素	display: inline;
行内块元素	display: inline-block;