分类

内联元素:
span，a，b，strong，i，em，br，input ，textarea

  • 本身属性为 display:inline;
  • 和其他行内元素从左到右在一行显示，不可以直接控制宽度、高度等其他相关 css 属性,但是可以直接设置内外边距的左右值
  • 宽高是由本身内容大小决定的(文字、图等)
  • 只能容纳文本或者其他行内元素，不能嵌套块级元素

块级元素
div，h1-h6，hr，menu，ol，ul，li，dl，table，p，from

  • 本身属性为 display:block;
  • 独占一行，每一个块级元素都会从新的一行重新开始从上到下排布，可以直接控制宽度、高度等其他相关 css 属性，例如(padding 系列, margin 系列)
  • 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度，高度内容撑开。

内联块状元素：
内联块状元素综合了前两种的特性却又各有取舍。

  • 不自动换行
  • 能够识别 width 和 height，line-height，padding，marign

  • 默认排列方式为从左到右

    应用场景

  • 内联元素：用于不指定宽高，宽高由内容指定

  • 块状元素：用于指定宽高，标签占满一行
  • 内联块状元素：用于指定元素宽高,不占满一行