`

span与div比较

阅读更多
div与span元素在显示上的不同,源于其默认显示模式(display)的不同。在前面我们曾了解过display属性的用法,用于改变元素的显示模式。

对于xhtml中的每一个对象而言,都拥有自己默认的显示方式,div对象的默认显示模式是display:block因为这样的 默认模式,从而使div成为一个块状容器,其默认状态就将占据一整行的空间。而span对象的默认显示模式为display:inline;因此span 将作为一个行间内联对象显示时以行内连接的方式进行显示。

正是由于两个对象不同的显示模式,因此在实际使用过程决定了两个对象的不同用途。div对象的任务是呈现一个块状内容,如一大段文本、一个导航区域、一个页脚区域等显示为块状的内容进行结构编码并进行样式设计。

而作为内联对象的span,用途是对行内元素进行结构编码以方便样式设计,span默认状态下就不会破坏行中元素的显示顺序,例如 在一大段文本中,我们需要改变其中一段文本的颜色,可以将这一小部分文本使用span对象,并进行样式设计,这将不会改变这一整段文本的显示方式。

span对象只是众多inline内联对象中的一种,而且是专门用于设计样式的一种内联对象,像strong对象也是一种内联对 象,使用之后将对某段文本进行加粗显示,是一种自带属性的内联对象,而span对象在默认使用情况下均不改变任何其中文本的属性,这是xhtml留给设计 者的一个空属性的内联对象,专门用于行内内容样式的自定义。

div所赋予的使命要比span重要的多,默认为块状显示模式的div对象在实际应用中担负页面大块布局及版式的所有工作,需要大量使用div进行组合或嵌套来实现我们网页的版式布局。

div与span对象有着自己各自的用途与使用方法,虽然我们可以通过display属性的更改对它们的显示方式进行变化,但并不意味着二者的互换能够对页面带来好处,我们所要做的是遵守xhtml留给我们的语言接口,使用最适合的对象来完成页面设计任务。
分享到:
评论

相关推荐

    div和span的区别

    div: div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。 Span: span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容...

    网页设计中的Span和Div的区别

    网页设计中的Span和Div的区别..........

    span掉落的演示代码

    博文 “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法 里的示例代码

    浅谈Span和Div的区别

    HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,...

    div与span之间有什么区别

    问:DIV与SPAN之间有什么区别? 答:解决思路: DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌...

    css教程:网页中Span和Div的区别

    HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,...

    DIV与SPAN之间有什么区别.doc

    DIV与SPAN之间有什么区别.doc

    div与span的区别和使用示例

    具体步骤: 1.所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解: 测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行...因为DIV与SPAN元素的特殊

    SPAN和DIV,Class与ID的区别汇总

    SPAN 和 DIV 的区别 SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用...

    深入理解DIV和SPAN的区别

    Span的宽度依照包围着对象的宽度而定,所以不能用宽度属性width设置span标记内对象的宽度,但可以设置span的margin(外补丁)值,span中的对象位置与父对象的距离 l Div 块元素 100% 会换行 l Span 行内元素 ...

    js+div+span实现树型结构

    使用js+div+span实现树型结构 非常简单的代码 一看就懂 下载解压直接打开就可以看出效果

    CSS里元素初始化文件html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,

    对css里的元素如:html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, ...

    div中加入span右对齐后出现换行显示两种解决思路

    后来我无意中发现有个东西叫<span>,比如实现模块的效果就可以:<div class=portlet align=left>文章<span>编辑</a></span></div>;当然我们还需要一个CSS文件去控制span的样式: 复制代码代码如下: .portlet span { ...

    html如何对span设置宽度

    这是一期分享 HTML 中 ...但是这样写就体现不了 span 这个标签的作用了,跟 div 功效一致,都表示块级元素。 推荐指数::star2: 方式二 使用 float 属性,设置属性为 span{float:left} ,呈现的效果如下: 由于 flo

    html标签例如img,div,span等基本标签的使用

    html标签例如img,div,span等基本标签的使用

    SPAN元素和DIV元素有的区别

    SPAN元素和DIV元素有的区别

    div+css实训

    div+css实训系列指导书所有需要的请下载《网页设计与制作(DIV+CSS)》实训指导书《网页设计与制作(DIV+CSS)》实训指导书

    HTML中div与span的区别(共同点与不同点)

    DIV标签和SPAN标签是将一些内容当成一个整体进行处理,比如,整体隐藏,整体移动。类似一个盒子一样的东西。这样做可以精简代码,提高效率。 不同点: 1、div是将内容放到一个矩形的区块中,随意移动会影响布局。而...

    网页中Span和Div的区别

    HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,...

Global site tag (gtag.js) - Google Analytics