div与span的区别——块对象与内联对象的区别

　　在用CSS做页面的时候，有时我们会感觉到，对于div标签，和span标签在某些情况下是没有区别的。

　　比如下列代码

<div style=”wdith:400px; height:200px; background-color:#FFFF00; color:#FF0000; text-align:center;”>
这是一个div标记
</div>

　　如果把div替换为span，两者的显示效果是一样的。

<span style=”wdith:400px; height:200px; background-color:#FFFF00; color:#FF0000; text-align:center;”>
这是一个span标记
</span>

　　点击查看实例

　　那div和span有什么区别呢？看下下面这个例子。

　　我们在建立三个div，并在每个div里面插入一张图片。
<p>div标记不同行：</p>
<div><img src=”http://coolhtml.cn/skin/redsky/images/logo.gif”></div>
<div><img src=”http://coolhtml.cn/skin/redsky/images/logo.gif”></div>
<div><img src=”http://coolhtml.cn/skin/redsky/images/logo.gif”></div>
<p>span标记同一行：</p>
<span><img src=”http://coolhtml.cn/skin/redsky/images/logo.gif”></span>
<span><img src=”http://coolhtml.cn/skin/redsky/images/logo.gif”></span>
<span><img src=”http://coolhtml.cn/skin/redsky/images/logo.gif”></span>
　　我们会看到，这个结果就是div排列的图片，是每张站一行的。而span排列的图片，三张都在同一行。

　　点击查看实例

　　从上面的例子我们可以看出，div默认的是一个行外标记，一个块对象，默认情况下，一个div是站一行的。而span是一个行内的标记，一个内联的对象，默认情况下，span嵌套在任何页面中，在不超过父模块边界的情况下，是在同一行显示的。

　　这就涉及到了块对象和内联对象。
　　所谓的块对象，就是指从新的一行开始且能包含其他块对象和内联对象的可视文档对象，块对象默认宽度是100%（继承自父元素），如果没有采用“float:left/right;”样式，相邻的两个块对象就会分排在不同的两行上。比如div就是一个块对象。　　而内联对象不会从新的行开始，而且其能够包含的内容也只能是内联对象和数据。就像文字，只要你不换行，他就会一个连着一个的往后面排，直到你换行或者到外部块对象的边界。内联对象的宽度取决于其内部元素的宽度与padding样式值之和，不可直接指定其宽度与高度，比如”a”标签，是一个内联对象，它就没有高度和宽度可言，但是在某些情况下需要我们来为内联标对象设定宽度和高度，这就涉及到了内联对象和块对象之间的转化。

　　块对象和内联对象我们可以通过display属性来进行强行的转化（display:inline是表示内联对象；display:block表示块对象），个人而言，我主要是用在把内联对象转为块对象上，比如”a”标签，或者”span”标签。我们也可以通过float:left/right;来将其转为块对象，因为float属性默认的就是display:block;也就是一个对象只要添加上了float属性，就相当于也同时添加了display:block;属性。