电子商务观察与网络营销思考

今天有个朋友问我在css的display属性中有个inline和inline-block，这两者之间的区别是什么？我还是一下子没回答上，不是我不知道他们的用法，而是不知道该怎么给他解释，后面我又从新整理了下，到底inline和inline-block之间有什么区别？要真正的理解这两个属性确实比较复杂，包括我自己也没有完全弄懂去利用这两个属性，尤其涉及到跨浏览器兼容设计时更加复杂。下面我只是简单的解释下他们的区别。

先看这段代码：

<style type="text/css">
.a{ display:inline; border:#003399 1px solid; width:350px; height:30px; margin-top:20px;}
.b{ display:inline-block;border:#CC6600 1px solid; width:350px; height:30px; margin-top:30px;}
</style>
<div class="a">inline效果</div>不换行
<div class="b">inline-block效果</div>换行

上面的这段代码实现的效果如下图：

从效果可以看出两个最基本的区别：

1.inline是一个行内属性，可以把容器定义为行内属性，而inline-block则把容器定义为块状属性。那么块状和行内属性的区别是什么呢？很明显从效果上就可以看到，定义inline属性后，div的宽、高、边距等属性就无效了，而对于inline-block属性则有效。

2.定义inline属性后的元素后没有换行，而对于inline-block属性元素后会有换行。

以上是两个最基本的区别，对于更复杂的应用，需要继续的学习css，不是一句话能讲清楚的，讲的多了，反而会晕。只要掌握这个基本用法，在实践中多运用几次就明白了。