CSS的元素显示模式与转换

CSS的元素显示模式与转换

1. CSS的元素显示模式

1.1 块元素

<div>标签是最典型的块元素。另外常见的块元素有h1~h六、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;