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

这里是修真院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)、元素的宽度就是它包含的文字或图片的宽度，不可改变。

 

 

 

【更多内容，欢迎加入交流群565763832与大家一起讨论交流】