CSS--块元素和行内元素及行内块元素(外加转换方式)

元素类型

根据css显示分类HTML元素被分为两种类型:块元素,内联元素


块元素—— block

块状元素(block element)

常见的块级元素有:
,

~

,

,

    ,
      ,

块级元素的特点:

  • 默认独占一行
  • 没有宽度时,默认撑满一排(块状元素默认宽度为100%)
  • 高度,行高,外边距和内边距都可以单独设置
  • 可以容纳内联元素和其他的块级元素

代表性的就是

,其他的比如pheadersectionaddress,语义化增强代码的可读性。

内联元素(行内元素)—inline

内联、行内元素(inline element)

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

行内元素的特点:

  • 多个行内元素可以同一行显示
  • 高度和宽度无效,高和宽由内容撑开
  • 不支持上下的margin,水平方向上的padding和margin可以设置
  • 行内元素只能容纳纯文本或者是其他的行内元素(a标签除外)

代表性的就是,其他的比如bra,大多数为描述性的标记

行内块级元素

除了块元素和行内元素,在行内元素中有几个特殊的标签

它们区别一般inline元素
,,