1.背景介绍
2.知识解析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
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值，使得我们有一个很方便的元素特性可供使用。
至于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里需要理解的核心概念之一。
对页面进行布局排版，究其根本是在普通文档流的基 础上，进行各种设置，达到我们想要的效果。
这三个元素特性，完全影响我们的布局排版。下面就开始认识一下它们。
2.知识解析
知识点1：常见的inline、inline-block、block元素
常见元素：
inline：a,span,br,i,em,strong,label,q,var,cite,code
inline-block：img,input
block：p，p,p,h1...h6,ol,ul,dl,table,address,blockquote,form
inline特点:
(1)和其他元素都在一行上，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
(2)元素的高度、宽度及顶部和底部边距不可设置
(3)元素的宽度就是它包含的文字或图片的宽度，不可改变。
block特点:
(1)每个块级元素都从新的一行开始，并且其后的元素也另起一行。
(2)元素的高度、宽度、行高以及顶和底边距都可设置。
(3)元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度。
inline-block特点:
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点，
代码display:inline-block就是将元素设置为内联块状元素。
和其他元素都在一行上;元素的高度、宽度、行高以及顶和底边距都可设置。
3.常见问题
问题一：inline和inline-block元素之间的间距问题
问题二：inline-block元素的如何垂直居中
问题三：利用浏览器来查看元素的类型
4.解决方案
问题1：inline和inline-block元素之间的间距问题
去除inline-block元素间间距的N种方法
问题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.编码实战
问题;
1.想要一个块级元素，是设置p好，还是设置span加display
答;这个可以根据自己的需求去写，也可以用p标准的block
2.inline-block布局较float布局而言，有哪些优势呢?
float布局：每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐，此原因是属于恶魔系的float属性破坏了inline box。
display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素。黑白通吃，左右逢源。inline-block属性的元素适用于inline box模型，所以，当其中的列表元素高度不一时，是不会有错位的。
3.
(1)块级元素的默认长度 答：默认长度是它父元素的长度。
