元素类型和垂直对齐

1.元素分类

1.常规分类

1.块级元素（block）：

独占一整行；可以设置宽高

常见的块级元素：html、body、div、header、footer、nav、section、p， h1~h6、ul、form、table、tbody、thead、tfoot、tr等；

2.行级元素（inline）：

有多宽占多宽，不可以设置宽高/垂直方向的内边距

行内元素：span、a、（img、textarea、button、input）、label、select、canvas、audio、video，b, i, strong、em、br、

3.行内块元素（inline-block）：

有多宽占多宽，可以设置宽高

4.可变元素：

根据周围的元素决定自己的类型

2.非常规分类

1.置换元素：

浏览器需要解析标签的属性和属性值，才能决定渲染什么效果。input botton

2.非置换元素：

不是置换就是非置换。

2.元素的类型转换

语法：

display：inline行级元素  |  block块级元素  |  inline-block行内快元素 | none隐藏；

diaplay的默认值为inline，

列表标签的默认值机为list-item；

主要用于a标签

3.元素的嵌套规则

1.块级元素里面可以有任何类型

2.p元素里只能有行级元素

3.行级元素里边只能有行级元素

4.a标签可以包裹块标签

5.ul/ol ,li必须配套出现

4.动态伪类选择器

1.鼠标悬停在e身上

e:hover

2.鼠标悬停在e身上，给里面的后代f设置样式

e:hover f

5.垂直对齐属性：只有行内块元素支持该属性

vertical-align:top  |  middle中间 | bottom下方 | baseline默认值基线；

应用：

img是inline元素，垂直对齐方式vertical-align默认值是baseline，而baseline和底线之间有偏差，偏差视字体大小而定，例如字体的大小是12px，那么缝隙就是3px左右。

1.解决图片3px问题【给图片设置该属性，属性值不能为baseline】

2.图片和文字垂直方向上对齐

3.表单标签垂直对齐【input和button】

4.表格中内容垂直对齐的设置