CSS元素的显示模式（行内元素、块元素、行内块元素）

CSS元素的显示模式（行内元素、块元素、行内块元素）

元素主要分为块级元素和行内元素以及行内块元素

1.块元素特点：

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

常见块级元素有： h1-h6、p、div、ol、li等

注意：

• 文字类元素内部不能使用块级元素

• p标签主要用于存放文字，因此p里面不能放块级元素尤其是div

• 同理 h1~h6内部都不能存放其它块级元素

2.行内元素特点：

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

常见行内元素有 a、strong、b、em、i 、del、s、u、span等。

注意：

• 链接中不能再放链接
• a里面可以放块级元素，但是给a转换一下块级模式最安全。

3.行内块元素：

• 特殊标签：img、input、td。
• 他们同时具备块元素和行内元素的特点。

特点：

1. 相邻的行内元素在一行上，之间会有缝隙，一行可以显示多行。（行内元素特点）
2. 默认宽度是本身宽度
3. 高度，宽度和内外边距可以改变。（块级元素特点）

总结

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