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