CSS教程:DIV元素与SPAN元素的区别

2016-02-20 00:29 7 1 收藏

下面,图老师小编带您去了解一下CSS教程:DIV元素与SPAN元素的区别,生活就是不断的发现新事物,get新技能~

【 tulaoshi.com - Web开发 】

首先讲两个概念,一个是行内元素,一个是块级元素。行业元素是指该元素标记的内容不不会对现在的结构造成影响,属于应用样式,辅助应用样式表等作 用;而块级元素为一个块状,单独占据一行,相当于在一个该元素前后各加一个换行。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

两者最明显的区别是:DIV(division)是一个块级元素,可以包含段 落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。 块元素相当于内嵌元素在前后各加一个
换行。其实,块元素和行内元素也不是一成 不变的,只要给块元素定义display:inline,块元素就成了内嵌元素,同样地,给内嵌元 素定义了display:block就成了块元素了。

具体步骤:

代码示例:

12345
style div,span{border:1px solid #000;margin:2px;} /style divdiv1/divdivdiv2/divspanspan1/spanspanspan2/span br / div style="display:inline"div3/div div style="display:inline"div4/div span style="display:block"span3/span span style="display:block"span4/span

提示:可以先修改部分代码后再运行

技巧:有些朋友会说DIV是层标签,其实HTML里 是没有层这个说法的,只不过是为了易于理解,Dreamweaver里才这样写的,每个对象都可以 成为层,只需要给对象定义position属 性(值为absolute或relavite)。 例如,要让图片成为层,可以这样写代 码:

1
 img src="demo.gif" style="posibion:absolute;left:20px;top:20px"/

特别提示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

本例代码运行效果如图所示,为了更能说明问题,这里给块元素和内嵌元素都加了1像 素宽的黑色实线边框,从图中可以看到,DIV默认为块元素,定义display属 性值为inline后以内嵌元素显示,而SPAN默 认为内嵌元素,定义display属性值为block后 则以块元素显示。

Dreamweave 1141450 标准布局中DIV元素和SPAN元素的区别和应用

SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代 码中的其它元素,这样你就可以为它们指定样式了。

来源:http://www.tulaoshi.com/n/20160220/1631951.html

延伸阅读
标签: Web开发
SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。 下面以一个实例来说明这两个属性的区别。 代码: <span>SPAN标记有一个重要而...
标签: Web开发
块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签’P”。“form”这个块元素比较非凡,它只能用来容纳其他块元素。 假如没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要...
标签: Web开发
CSS网页布局应该避免滥用div元素一直是webjx.com倡导的,以合适的HTML标签组织文档是CSS网页布局的基础。 页面中div与span元素的使用是一个新问题,我们也容易过多的使用它们。必要及合理的使用div可以明显的增强文档的结构性。 如果你审视你的HTML文档,发现有着很多的div与span,那你就得换一个眼光来看问题了,是不是存在...
标签: Web开发
关于用CSS来实现元素的定位问题,其实很多人对此都是一知半解,没有形成一个统一的认识,CSS对元素的定位包括相对定位和绝对定位,同时,还可以把相对定位和绝对定位结合起来,形成混合定位,我收集相关资料总结了一下: 1. position:static|无定位 position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 exam...
标签: Web开发
块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆...

经验教程

681

收藏

20
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部