434 字
2 分钟
块级元素,行内元素和行内块元素

块级元素#

每个块级元素都是独占一行或者多行,可以对其单独设置高度,宽度以及对齐等属性

块级元素有divptable,nav、aside、headerfootersection、article、ulli

~

,address等。

块级元素的特点

  • 块级元素会独占一行B
  • 高度,行高,外边距和内边距都可以单独设置
  • 宽度默认是容器的100%
  • 可以容纳内联元素和其他块级元素

行内元素#

行内元素(内联元素)不占有独立的区域,仅仅依靠自己的字体大小或者是图像大小来支撑结构,一般不可以设置宽度,高度以及对齐等属性

常见的行内元素有:,,,,,

行内元素的特点:

notes:

  • 只有文字才能组成段落,因此类似

    ,

    ~

    ,
    等都是文字块级标签,所以里面不能放块级元素
  • 链接里面不能再存放链接

行内块元素#

常见的有:, ,

可以设置他们的宽高度和对齐的属性

行内块元素的特点:

  • 和相邻的行内元素(行内块)再一行上,但是中间会有空白的间隙
  • 默认的宽度就是本身内容的宽度
  • 高度,行高,内边距和外边距都可以设置

显示模式的转换#

块转行内:display:inline

行内转块:display:block

块,行内元素转换为行内块:display:inline-block

块级元素,行内元素和行内块元素
https://nollieleo.github.io/posts/块级元素行内元素和行内块元素/
作者
翁先森
发布于
2020-03-26
许可协议
CC BY-NC-SA 4.0