先上个例子，我们具体观察一下。
将a链接元素为inline（其实不需要特意设置，a默认就是inline属性）：
<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a> <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>
将a链接元素为block：
<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a> <a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>
将a链接元素设置为inline-block：
<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;>链接一</a> <a href="#" style="display:inline-block;width:100px;height:100px;background:black;>链接一</a>
最后的效果如下图：
可见行级元素a即使设置了宽高也是不生效的，使用display：block将a改为块状元素后，宽高设置生效了，但这两链接元素又没法放在一起，有时候不能满足需求，那这时候我们就需要inline-block了，他可以让行级元素拥有自由的宽高，同时又保持多个“变异”后的元素在同一行。
