元素类型的分类，依据CSS的显示

块元素(block element)

行内（内联）元素

行内块元素

A）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，

B）默认情况下，块状元素都会占据一行；默认情况下，块状元素会按顺序自上而下排列。

C）块状元素都可以定义自己的宽度和高度。

D）块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子

A) 内联元素的表现形式是始终以行内逐个进行显示；  横着排

B) 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；

C)内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效

 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点

例如：div  p  ul li  ol li dl dt dd  h1-h6等

例如：a  b  em  i  span  strong等

例如：img  input等

元素类型之间的转换  display

个数

属性

说明

1

display：block；

把元素转换成块

2

display：inline；

把元素转换成行内

3

display：inline-block；

把元素转换成行内块

4

display：none；

隐藏

5

display：list-item

li标签默认的display属性值

display的属性值有18个属性值，甚至更多，display：table-header-group/table-footer-group/flex inline-flex/table/table-cell/table-caption.......

垂直对齐 vertical-align

个数

属性

说明

只有元素类型是行内块或者设置了display：inline-block的时候才支持vertical-align属性

1

vertical-align：baseline；

默认值   baseline基线

2

vertical-align：middle；

垂直在line-height范围居中对齐

3

vertical-align：top；

垂直方向上在line-height的顶端对齐

4

vertical-align：bottom；

垂直方向上在line-height的底端对齐

5

vertical-align：text-top；

垂直方向上在文字的顶线对齐

6

vertical-align：text-bottom；

垂直方向上在文字的底线对齐