块级元素和行内元素

块级元素和行内元素

块级元素

• 块级元素独占一行，不与其他元素并列

• 可以设置宽，高，内外边距；若没有设置宽度，则默认为父级的100%

• 可以容纳内联元素和其他块级元素

  常见的块级元素有：

  ,

  ~

  ,

  ,

  1. ,
     • ,
     • 等

  但是， 类似

  ,

  ~

  等里面不能放块级元素

行内元素

• 与其他行内元素并排

• 不能设置宽高，默认宽度是它的文字或图片的宽度；可以设置水平方向上的padding和margin，垂直方向上不可以

• 只能容纳文本和其他内联元素

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

  但是，标签里面不能再放标签

行内块级元素

• 和相邻行内元素会有空隙

• 默认宽度是其本身内容的宽度

• 宽高内外边距都可以设置

  即在行内元素中特殊的标签： ,,

相互转换

块级元素转行内元素：display： inline

行内元素转块级元素：display： block

行内元素转行内块级元素：display： inline-block