小程序进阶-inline、block和inline-block的区别与联系

背景介绍

每个html标签元素都有默认的元素类型，主要包括两大类：inline内联元素和block块元素。其他则称为可变元素，会根据上下文语境决定该元素为inline元素或者block元素。
在css里，有一个display的属性，它规定元素应该生的框的类型，可能的值很多，除inline、block，常用的有table-cell、inline-block等，其中inline-block是css2.1里新增的值。
line和block类似于1+1=2的基础概念。在没有网络的时代，有一种叫做剪报的东西，它是把报刊杂志等上面剪下的文字、图片资料，整理分类成册。我们可以把剪下来的纸片看作是block元素，而用笔记录的文字、图画，看成是line元素。最早做浏览器的时候加入这两个元素，可能是遵循同样的模式。
inline-block，据资料发现，在IE5.5开始支持inline-block值，也就是1999年12月（最终版为2007年7月）。css2更新发布在1998年5月，2.1的个更新草案则是在2002年8月2日发布的（css2.1版添加了display的inline-block值）。当年可能是为了更好的进行元素布局，踩在标准里给display添加inline-block值。

知识剖析

1. 常见元素

inline元素：a,span,br,i,em,strong,label,q,var,cite,code
inline-block元素：img,input
block元素：p,div,h1...h6,ol,dl,table,address,blockquote,form
1
2
3

2. 各自具有什么特点

inlin特点：

（1）和其他元素都在一行上，直到一行排列不下，才会新换一行，其宽度随元素内容而变化
（2）元素的高度、宽度及顶部和底部边距不可设置
（3）元素的宽度就是它包含的文字或图片的宽度，不可改变
1
2
3

block特点：

（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。
（2）元素的高度、宽度、行高以及和底边距都可设置
（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
1
2
3

inline-block特点：

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。和其他元素都在一行上；元素的高度、宽度、行高以及底边距都可设置。
1

常见问题与解决方案

1. inline和inline-block元素之间的间距问题

设置父容器的font-size为0，子容器重新设置font-size。
1

2. inline-block元素的如何垂直居中

设置上下padding值相等；
设置vertical-align:middle;
设置line-height大于font-size；
1
2
3