HTML标签分类

按类型分类

• block : div、p、ul、li、h1 …

    1、独占一行
    2、支持所有样式
    3、不写宽的时候，跟父元素的宽相同
    4、所占区域是一个矩形
  

• inline : sapn、a、em、strong、img …

    1、可以在同一行（同行并排）
    2、有些样式不支持，例如:width、height、margin(左右支持)、padding
    3、不写宽的时候，宽度由内容决定
    4、内部的标签的只能是文字或者Inline型标签,项目中的inline主要用来套文字
    5、所占的区域不一定是矩形。
    例如：当宽度缩小的时候span标签里面的文字会自动换行，
    由于内容不够多，那么显示出来的两行，
    一行长一行短，不会像block类型的元素一样是在block内。
    6、内联标签之间会有空隙。
    原因：由于代码换行产生的。
    不改变代码位置，消除该空隙的方法：
    为其父级设置font-size:o;并在子级中恢复字体大小，
    恢复的原因是font-size具有继承性
    （猜测：font-size:0将字体空行取消了）
  

• inline-block : input、select …

    1、可以在同一行，并且支持宽高
    2、支持所有的css样式设置
    3、在不设置宽高大小时，有内容撑开盒子的大小，其内容可以时任意的标签和文字
    4、垂直方向上，所有的行级标签，在默认情况下手机按照其内部最后一行文字的底线对齐,为了保持其一致性,需要给每个行级标签设置vertical-align属性,保证垂直方向上的对齐
  

设置盒子的对齐基线
Middle 将基线设置到盒子的中部
bottom 所有元素按照本行高度最低的元素底部对齐
top 所有元素按照本行高度最高的元素顶部对齐

vertical-align 属性在应用时必须给一行要对齐的元素同时设置

按内容分类

Flow：流内容
Metadate：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedderd：嵌入的
Interactive：互动的