a是行内元素 无法直接设置宽度大小，有a的时候文本颜色必须要给a添加

元素类型分类

块级元素，行内元素，可变元素（可变用的少）

行内元素=>行内块元素

1.  1块级元素的特点：常见的块级元素有哪些：div  p    ul  ol  li  h1-h6 等，块级元素在浏览器中是以一个盒子显示的可以直接设置宽高大小，块级元素独占一行，排列顺序从上到下

做用：可以嵌套其他元素类型作为页面布局

2.行内元素的特点：常见的行内元素：span  a   i  br   em   strong等，行内元素无法直接设置宽高大小，宽高由自身的内容决定（font-size）  ，行内元素在一行内逐个显示。

重要（bug）在行内元素中设置margin-top/bottom会失败，但依旧遵循和模型布局规则。

3.可变元素 通过方法改变元素的显示方式。-

特点：可以设置元素的大小=>块级元素的特点，在一行内逐个显示=>行内元素的特点，包含了块级元素的可以设置宽高大小的特点以及行内元素的在一行内逐个显示的特点

常见的行内块：input  img 

行内块都是以基线对齐

解决基线对齐解决方法： vertical-aling:top , bottom ,    middle

元素类型的转换display属性值（19个）

属性值

-block   块   块壮   块级   将其他的元素类型转换为块级元素，使其具有块级元素特点。

-inline 行内 将其他的元素类型转换为行内元素，使其具有行内元素特点

-inline-block 行内块  将其他的元素类型转换为行内块元素，使其具有行内块元素特点

-list-item  列表项目 将其他的元素类型转换为列表元素，使其具有块元素特点

-none 无 没有 删除整个html结构（隐藏）

重要：block和none之间的使用  显示与消失

给元素标签添加浮动就相当于让元素转换成了行内块元素

总结 常见的块级元素默认的元素类型都是block

常见的行内元素默认的元素类型都是inline

常见的行内块元素默认的元素类型都是imline-block

图片垂直居中 img

原理：基线对其原理

图片是行内块元素是以基线对齐的

在水平方向图片居中 text-align:center

给图片后添加任意一个标签

--end