HTML中哪些元素是inline？哪些是inline-block？哪些是block的? 有哪些区别？

历史小故事 ：这三个元素到底是怎么产生的？

在没有网络的时代，有一种叫做剪报的东西，它是把从报刊杂志等上面剪下的文字、图片资料，整理分类并集纳成册。我们可以把剪下来的纸块看成是block元素，而用笔记录的文字、图画，看成是inline元素。最早在做浏览器的时候加入这两个元素，是遵循了同样的模式。

在2002年8月2日发布的css2.1版添加了display的inline-block值。为更好的进行元素布局，W3C组织才在标准里给display添加inline-block值，让我们有一个很方便的元素特性可供使用。下面我来讲下各自特点：

inline元素

inline元素全称Inline Elements，英文原意:An inline element does not start on a new line and only takes up as much width as necessary.一个内联元素不会开始新的一行，并且只占有必要的宽度。

主要特点

1. 所有inline元素都在一行上；
2. 元素的高度、宽度、行高及顶部和底部边距不可设置；
3. 元素的宽高就是它包含的文字或图片的宽高，不可设置改变；

block元素

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).一个块级元素总是开始新的一行，并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)

主要特点

1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。也就是：一个块级元素独占一行;
2. 元素的高度、宽度、行高以及顶和底边距都可设置;
3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

inline-block元素

inline-block元素，英文释义:inline-block elements are like inline elements but they can have a width and a height.它像内联元素，但具有宽度和高度。

主要特点

1. 和其他元素都在一行上；
2. 元素的高度、宽度、行高以及顶和底边距都可设置

常见的inline内联元素：

span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））

常见的block块级元素：

div、p、h1…h6、ol、ul、dl、table、address、blockquote、form

常见的inline-block内联块元素：

img、input

inline元素、block元素、inline-block元素的区别

1. 块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。

2. 块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。

3. 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。