大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网前端工程师（职业）css任务1，深度思考中的知识点——常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？
一.背景介绍
历史
这三个元素到底是怎么产生的。
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之间发生过什么友好协商我们就不得而知了。(参考1)
目的
理解这几个元素是学习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、block、inline-block元素？
2、各自具有什么特点？
3、相互之间有什么区别？
1、什么是inline、block、inline-block元素？
如果只用一句话描述:inline是内联元素，block是块级元素，inline-block是内联块元素。
inline元素全称Inline Elements，英文原意:An inline element does not start on a new line and only takes up as much width as necessary.一个内联元素不会开始新的一行，并且只占有必要的宽度。
常见的块元素有div、p、h1...h6、ol、ul、dl、table、address、blockquote、form。
block元素全称Block-level Elements，英文原意:A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).一个块级元素总是开始新的一行，并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)
常见的块元素有div、p、h1...h6、ol、ul、dl、table、address、blockquote 、form。
inline-block元素，英文释义:inline-block elements are like inline elements but they can have a width and a height.它像内联元素，但具有宽度和高度。
img、input标签就是这种内联块元素标签
2、各自具有什么特点？
inline元素:
(1)、和其他元素都在一行上；
(2)、元素的高度、宽度、行高及顶部和底部边距不可设置；
(3)、元素的宽度就是它包含的文字或图片的宽度，不可改变。
block元素:
(1)、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）;
(2)、元素的高度、宽度、行高以及顶和底边距都可设置;
(3)、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
inline-block元素:
(1)、和其他元素都在一行上；
(2)、元素的高度、宽度、行高以及顶和底边距都可设置
3、互相之间的区别
区别主要是三个方面:一是排列方式，二是宽高边距设置，三是默认宽度。
(1)块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
(2)块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。
(3)块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。
三.常见问题
插入img下面会有空白
四.解决方案
1、给图片img标签display:block
2、定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。
3、定义容器里的字体大小font-size为0。
img元素底部为何有空白？
五.编码实战
六.扩展思考
inline-block和float的区别
1、文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。
2、水平位置（Horizontal position）：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。
3、垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
4、空白（Whitespace）：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴.
7.参考文献
1、你真的懂display:inline-block吗
2、block,inline和inline-block概念和区别
3、深入理解CSS块级(block)元素和内联(inline)元素
4、CSS Layout
5、CSS最核心的几个概念
6、应不应该使用inline-block代替float
7、img元素底部为何有空白？
8.更多讨论
PPT连接：
PPT
如果这篇文章对你有帮助，并且使你对修真院免费在线学习感兴趣，可以通过我的链接注册成员会，这会使我得到学分（兑换学时）延长学习时间：
邀请链接：http://www.jnshu.com/login/1/13374512
邀请码：13374512