block、inline、inline-block的区别。

block很简单，很好理解

inline（行内元素）:

1. 只占据自身高度和宽度大小的空间，这两个大小无法设定，由字体的大小和数量来决定。
2. 可以设置左右的内外边距，而不能设置上下的内外边距。
3. 内联元素一般不可以包含块级元素。下面具体讲解一下：

• 第一个问题：一般不可以，那不一般的时候呢?

默认情况下是不行的，不过，一个标签的默认属性可以被 display 属性更改 ，如果 a 的 display 属性更改为 block或者 inline-block 那么就可以嵌套了 ；其次，a 标签嵌套 div 块级元素还与 a 的父元素有关，当 a 的父元素是 div 时，可以嵌套，若父元素为 p 标签，则无法嵌套。总之，尽量不要在内联元素里面嵌套 div，若必须嵌套，可以先设置该内联元素的 display 为 block。

• 第二个问题：如果我把块级元素嵌套进内联元素了，会发生什么？

首先！什么都不会发生，嵌套进内联元素就像嵌套进块级元素一样，该怎么显示还怎么显示，但是！块级元素并不会继承父级内联元素的属性。其次，拿 XHML 来说，Strict 完全将结构与表示分离，在 Strict 里面，内联元素嵌套块级元素是不生效的；Transitional 是更加宽容的规范，在 Transitional 里面，嵌套可以，但是不同浏览器的解析表现行为有所不同。

所以，如果不想让你的页面在不同的浏览器显示的五花八门，还是尽量不要将块级属性嵌套进内联属性。

inline-block（内联块元素） :

注意：img 是一个特殊的行内元素，它不仅仅是一个行内元素，还是一个置换元素。置换是元素有一个特征，浏览器会根据元素的标签和属性，来共同决定元素的具体显示内容。所以这就是为真么 img 作为一个行内元素，还可以为其设置宽高。