常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？

这里是修真院前端小课堂，本篇分析的主题是

【常见的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里新增的值。具有这个值的元素，我们可以把它叫做inli