434 字
2 分钟
块级元素,行内元素和行内块元素
块级元素
每个块级元素都是独占一行或者多行,可以对其单独设置高度,宽度以及对齐等属性
块级元素有div、p、table,nav、aside、header、footer、section、article、ul,li、
~
,address等。
块级元素的特点
- 块级元素会独占一行B
- 高度,行高,外边距和内边距都可以单独设置
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块级元素
行内元素
行内元素(内联元素)不占有独立的区域,仅仅依靠自己的字体大小或者是图像大小来支撑结构,一般不可以设置宽度,高度以及对齐等属性
常见的行内元素有:,,,,
,等
- 和相邻的行内元素在同一行上
- 高度宽度上无效,但是水平方向上的padding和margin可以设置,垂直方向上无效
- 默认的宽度就是它本身的宽度
- 行内元素只能容纳纯文本或者是其他的行类元素,除了(a标签)
- 只有文字才能组成段落,因此类似
,
~
,
- 等都是文字块级标签,所以里面不能放块级元素
- 链接里面不能再存放链接
行内块元素
常见的有:
, ,
可以设置他们的宽高度和对齐的属性
行内块元素的特点:
- 和相邻的行内元素(行内块)再一行上,但是中间会有空白的间隙
- 默认的宽度就是本身内容的宽度
- 高度,行高,内边距和外边距都可以设置
显示模式的转换
块转行内:display:inline
行内转块:display:block
块,行内元素转换为行内块:display:inline-block
块级元素,行内元素和行内块元素
https://nollieleo.github.io/posts/块级元素行内元素和行内块元素/