div和span的区别,块对象和内联对象

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;属性。

关于鸡鸡哥的聪明伶俐的儿子和如花似玉的老婆

嗜抽烟,嗜吃肉,常睡觉晚起,熬夜,看新闻,喜体育栏目,会操作电脑,会操作服务器,能做些别人不屑于做的事情。厌做饭,恶洗碗,不洗澡,不刷牙,不剃胡须,不喜逛超市,重压之下偶去之,无上进心,无恒心,无毅力。 1988-1998年,虚度人生 2001-2013年,懵懵懂懂忽然就有孩子有老婆有,匆匆间父亲去世,匆匆半个人生没有了 2013- 知道自己需要什么,知道自己该做什么,知道自己的是个什么样的人,重新上路,明明白白活自己。 ------鸡鸡哥 2013.02.28 老了,以后得改称老鸡鸡哥了,继续努力吧 -----鸡鸡哥 20150517
此条目发表在网站建设分类目录。将固定链接加入收藏夹。

发表评论