block,inline和inline-block

愚蠢如我，基础知识不扎实（ 上次面试拿到的第一道题目就是关于block,inline和inline-block的定义。前两个自然没啥问题……最后一个就蒙了，因为完全想不起来……
所以这次特地写一下来巩固知识。

block为块级元素，inline为内联元素，inline-block我们放在后面再说。

block

顾名思义，block即为块级元素。
块级元素有这么几个特性：

1. 块级元素会单独占据一行。多个块级元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2. 块级元素可以设置width，height属性。需要注意的是，块级元素即使设置了宽度,仍然是独占一行。
3. 块级元素可以设置margin和padding属性。

而在HTML中最常见的块级元素有：div , form, table, p, pre, h1-h6, dl , ol, ul.

inline

inline即为内联元素，也叫行内元素。内联元素具有如下特性：

1. 内联元素不会独占一行，多个相邻的内联元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2. 内联元素设置width,height属性无效。
3. 内联元素的margin和padding属性，水平方向的padding-left, padding-right,margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom,margin-top, margin-bottom不会产生边距效果。

常见的内联元素有：span, a, strong, em, label, input, select, textarea, img, br 等

（接下来就是当初我翻车的知识点——）

inline-block

inline-block，看名字你就知道这个会使元素既呈现块级元素的性质也有内联元素的性质（面试的时候这么答了然后被对方问了细节就GG了╮(￣▽￣”)╭

于是这里还要补充。简单来说，inline-block就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
一句话，inline-block可以使元素被排列在同行并具有宽度高度等特性。

需要注意的是，IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。