前端入门经验——CSS样式（1）

1、block和inline-block

具体参考：block，inline和inline-block的区别

1. block：块级元素，通常会单独占一行
   常见的块级元素有div、from、table、p、H1~H6、ol、ul.

2. inline： 内联元素，前后不会换行。
   常见的内联元素有：span、a、em、label、input、select、img、br.

3. display:inline:设置width和height属性无效。水平的padding和margin和会产生边距效果，但是竖直方向的padding和margin不会产生边距效果。

4. display:block：可以设置width和height，可以设置margin和padding。

5. display:inline-block：简单的说就是将对象呈现为inline对象，但是对象作为block对象呈现。既具有block的高度又具有inline的同行属性。

2、 vertical-align

菜鸟教程关于此属性的解释

1. vertical-align 属性设置一个元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

2. 常用的属性值： top (把元素的顶端与行中最高元素的顶端对齐) 、middle(把此元素放置在父元素的中部。)、bottom(使元素及其后代元素的底部与整行的底部对齐)