inline block inline-block

inline element:  元素前后没有换行符，即与其他element在同一行上。height，widht，pading，margin都不可控。

                     widht是其文字，图片的实际宽度。举例： <span>, <a>, <label>等

block element： 元素前后都有换行符，即block element独占一行。height，widht，pading，margin都可控。

                         宽度缺省是它的容器的100%，除非设定一个宽度。

                         举例： <div>, <p>, <h1>, <form>等

inline-block element： 整体对外为inline element，块内为block。即对外与其他元素在一行显示，但该块的

                                   height，widht，pading，margin都可控。

All in-flow children of a block flow must be blocks, or all in-flow children of a block flow must be inlines.

block element内全部是block element或全部是inline element

All in-flow children of an inline flow must be inlines.

inline elemen内全部都是inline element

Block element中既有block又有inline，此时将所有的inline包裹到Anonymous Blocks中。

Inline element中有block时，此时将最外层inline分解为两个Anonymous Blocks。举例：

<i>aaaa<div>bbb</div>aaaa</i>

===>

<anonymous block><i>aaaa</i></anonymous block><div>bbb</div><anonymous block><i>aaaa</i></anonymous block>

see: https://www.webkit.org/blog/115/webcore-rendering-ii-blocks-and-inlines/