这里是修真院web小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解web知识/技能，本篇分享的是：
【 常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？】
大家好，我是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)、元素的宽度就是它包含的文字或图片的宽度，不可改变。
作者：大大头大
链接：https://www.jianshu.com/p/cca9f037a6b9
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
如果这篇文章对你有帮助，并且使你对修真院免费在线学习感兴趣，可以通过我的邀请链接进行注册，这样可以在日后为你的线下学习减免学费。
邀请链接：http://www.jnshu.com/login/1/23246304
邀请码：23246304
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地