1.背景介绍
2.知识解析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
历史
这三个元素到底是怎么产生的。 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值，使得我们有一个很方便的元素特性可供使用。 至于W3C和IE之间发生过什么友好协商我们就不得而知了。
目的
理解这几个元素是学习web需要理解的核心概念之一 每个html标签元素都有其默认的元素类型，主要包括两大类:inline内联元素、block块元素。除默认为以上两种，还有部分标签元素叫可变元素，会根据上下文语境决定该元素为inline元素或是block元素。在css里，有一个display的属性，他规定元素应该生成的框的类型。可能的值有很多，我们比较常用的有table-cell，inline-block等，也包括我们这次小课堂要讲的inline、block、inline-block。 其中inline-block是在css2.1里新增的值。具有这个值的元素，我们可以把它叫做inline-block元素。 以上元素的类型是我们学习web里需要理解的核心概念之一。 对页面进行布局排版，究其根本是在普通文档流的基 础上，进行各种设置，达到我们想要的效果。 这三个元素特性，完全影响我们的布局排版。下面就开始认识一下它们。
知识点1：常见的inline、inline-block、block元素
常见元素：
inline：a,span,br,i,em,strong,label,q,var,cite,code
inline-block：img,input
block：p，div,p,h1...h6,ol,ul,dl,table,address,blockquote,form
（1）和其他元素都在一行上，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
(2)元素的高度、宽度及顶部和底部边距不可设置.
(3)元素的宽度就是它包含的文字或图片的宽度，不可改变。
（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。
(2)元素的高度、宽度、行高以及顶和底边距都可设置。
(3)元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点， 代码display:inline-block就是将元素设置为内联块状元素。
和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
问题一：inline和inline-block元素之间的间距问题
问题二：inline-block元素的如何垂直居中
问题三：利用浏览器来查看元素的类型
问题2：inline-block元素的如何垂直居中
方法1：设置上下padding值相等；
方法2：设置vertical-align:middle;
方法3：设置line-height大于font-size即可实现单行文本垂直居中，无需设置line-height和height值相等
问题3：利用浏览器来查看元素的类型
打开谷歌浏览器，F12，选中“Element”项，然后选中一个元素，在“Computed”的display中即可看到元素的类型， 查看到底是inline元素还是block 元素，亦或是其它类型的元素。
5.编码实战
感谢大家观看
By 段俊超