标签的划分

  • 块级元素

    • 【特点】
      • 独占一行 排列方式：从上到下
      • 写宽，高起作用
      • 可以设置css盒子模型(width/height/border/margin/padding)
      • 在不设置宽高时，宽是继承父级的宽度，高是由内容决定的
      • 可以嵌套其他标签
      • p标签不能嵌套p标签
    • 【html标签】
      div、p、h1-h6、ul、li、ol、dl、dt、dd、table>tr>td（表格>行>列）
    • [html新增标签]
      header 头部
      footer 尾部
      nav 导航
      section 区别大模块（div）
      article 文章

  • 行内元素

    • 【特点】
      • 允许其它元素共占一行
      • 写宽，高不起作用，它的宽高是由自身内容决定的
      • 排列方式：从左到右
      • 间隙问题
      • 基线对齐问题
      • 可以嵌套行内标签(不可以嵌套块级标签)
    • 【html标签】
      a 超链接、锚点、span 区分行内小模块、格式化标签： strong(强调作用)/b 加粗、em(强调作用)/i 斜体

  • 行内块元素

    • 【特点】
      • 允许其它元素共占一行
      • 写宽，高起作用
      • 排列方式：从左到右
      • 可以设置css盒子模型的所有属性（宽高）
      • 间隙问题
      • 基线对齐问题
    • 【html标签】
      img 图片、input 添加表单类的功能、select 下拉框
    • [html新增标签]
      audio 音频
      video 视频

行内块级标签和行内标签的特点

  • 不同点：行内块级标签可以设置宽高、行内标签不可以设置宽高
  • 相同点：
    1. 在一行显示，从左到右排
    2. 在编辑代码时，行内标签和行内标签之间出现空格和换行时，会有间隙问题(4px)
      1. 解决办法：给父级元素设置font-size：0；有css继承问题，导致子元素字体大小也为0，再给子元素设置font-size值就可以了
    3. 基线对齐问题(不规则的基线对齐方式叫做基线对齐)
      1. 解决办法：给所有html标签加一个css属性，
        vertical-align
        1. top去找所有html标签中最高的顶部对齐
        2. middle去找所有HTML标签中高度最高的中部对齐
        3. bottom去找所有HTML标签中高度最高的底部对齐


块级标签转化为行内块标签有几种方式？

行内块:在一行显示，可以设置宽高

  • display:inline-block 行内块
    • 在一行显示，从左向右排布
    • 间隙
    • 基线对齐
  • float:left/right 行内块
    • float:left;左浮动，从左向右排布
    • float:right;右浮动，从右向左排布
    • 特点：没有基线对齐和间隙问题