CSS与HTML元素类型

元素类型的分类：
    根据css显示 元素类型可 块级/块状/块元素、行内元素/内联元素 可变元素（从行内元素中拓展出的行内块元素）

    1、块元素的特点
        常见的块元素：div、ul、li、p、h、ol、等
         特点：
            1.块元素可以直接设置宽高大小
            2.块元素无论宽高大小是多少都会独占一行
            3.块元素默认上下排列
            作用：块元素可以嵌套其他元素类型或者行内元素作为盒子实现页面布局
        
    2、行内元素的特点
         常见的行内元素：a、span、i、em、b、strong、等
         特点：
            1.行内元素不可以直接设置宽高大小，由自身内容决定宽高大小
            2.行内元素默认在一行内逐个显示。
            常见的bug：设置margin-top/bottom没有效果，计算方式依然遵循盒模型的计算方式。原因行内元素没有高度，无高度边框
    3.可变元素（表示根据上下关系改变当前元素的类型）
        特点
            可以直接设置宽高大小=>块元素
            可以在一行内逐个显示=>行内元素
        常见的行内块元素：input、img
        所有的行内块元素都是以基线对齐 解决基线对齐 vertical-align：top、bottom、middle

元素转换：display（显示方式）
    1、block 块 将其他元素类型转换为块元素 使其具有块元素的特点
    2、inline 行内 将其他元素类型转换为行内元素 使其具有行内元素的特点
    3、inline-block 行内块元素 将其他的元素类型转换为行内块元素 使其具有行内块元素的特点
    需要了解：list-item 将其他元素转换为列表（块元素）
    nane：
        list-style：清除列表的默认样式
        text*decoration 清除a标签的默认下划线
        backgroud/border
        outline：
    display：none/block 一对使用 隐藏 把结构删除 不占位置
重点：如果给当前元素设置了浮动 含有浮动属性 表示将当前元素转换成了行内块元素

常见的自带边框的标签有哪些
    input hr textarea多行文本域 select
常见的行内块元素：textarea、select
置换元素与百置换元素
    置换：有初始的宽高大小，并且可以通过修改属性的属性值，显示不同的样式img input textarea select

设置img图片居中对齐

    设置一个span标签，把span标签的高度设置与父级盒子的高度一样
    再把span标签设置为display：inline-block
    最后让img标签与span标签居中对齐就能实现垂直居中对齐