1-1 html标签分类

  • 块标签

    1. div,h1~h6,p,ul,li,dl,dt,dd
    2. 特点
    3. 1.独占一行
    4. 2.能设置width,height
  • 内联标签

    a,span,em,strong
    特点
    1.并排显示
    2.不能设置width,height
    3.不能设置margin-top,margin-bottom
    
  • 内联块

    button,img,input
    特点
    1.并排显示
    2.可设置width,height
    

    1-2 原理

    快标签:独占一行,能设置width,height
    div,h1~h6,p,ul,li,dl,dt,dd

    display:block;
    

    内联标签:并排显示,不能设置width,height,margin-top,margin-bottom
    a,span,em,strong

    display:inline;
    

    内联块:并排显示,能设置width,height
    button,img,input

    display:inline-block;
    

    1-3 设置水平居中

  • 方案一:让内联元素和内联块元素水平居中

    display:block;
    margin-left:auto;
    margin-right:auto;
    
  • 方案二:让内联元素和内联块元素水平居中

    //给父元素加
    text-align:center