元素类型

 元素类型分类：

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

 块元素：

-常见的块元素：div、ul、li、p、h、ol...

1. 块元素可以直接设置宽高大小。
2. 块元素无论宽高大小是多少都会独占一行
3. 块元素默认上下排列

   作用：

-块元素可以嵌套其他类型或者行内元素（作为盒子实现页面布局）

 行内元素：

常见行内元素：a、span、i、em、b、strong.....

特点：

1. 行内元素不可以直接设置宽高大小，它的宽高大小是由内容决定的
2. 行内元素默认在一行内逐个显示，除非宽度不够。
3. 常见的bug:设置margin-top/bottom没有效果，但是它的计算方式依然遵循盒模型的计算方式

可变元素（表示根据上下文关系改变当前元素的类型）

    

行内块元素的特点：

  常见：input、img

     -可以直接设置宽高大小

     -可以在一行内逐个显示

     -所有的行内块元素都是以基线对齐（基线是一条虚拟线，每个标签的基线位置不一致），解决方法：设置vertical-align:top\bottom\middle

元素的转变：

属性：display

属性值：block\inline\inline-block\list-item\none

        -block （块） 将其他元素转换为块元素

        -inline （行内） 将其他元素转换为行内元素

        -inline-block （行内块元素） 将其转换为行内块元素

        -list-item （列表元素） 将其他元素转为列表

        -none:

1. list-style: 清除列表的默认样式
2. text-decoration 清除a标签的默认下划线
3. background/border
4. outline：none 清除表单输入框的自带边框
5. display：none 隐藏 把结构删除 不占位置，display:block 显示  

重点：当元素浮动后就会转变为行内块元素，具有块元素的特点

置换元素：有初始的宽高大小，并且可以通过修改属性的属性值  显示不同的样子。

常见的有：img、input、

非置换元素：相反。