搞定CSS SPAN和DIV的区别

2016-02-19 21:32 3 1 收藏

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐搞定CSS SPAN和DIV的区别,无聊中的都看过来。

【 tulaoshi.com - Web开发 】

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

下面以一个实例来说明这两个属性的区别。

代码:

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

SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中,标识符允许你将一个段落分成不同的部分。

还有一个标识符具有类似的功能, DIV也被用来在HTML文件中建立逻辑部分。但与 SPAN不同, 工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。

效果:

SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中,标识符允许你将一个段落分成不同的部分。

还有一个标识符具有类似的功能,

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

DIV也被用来在HTML文件中建立逻辑部分。但与

SPAN不同,

工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。

来源:https://www.tulaoshi.com/n/20160219/1626463.html

延伸阅读
标签: Web开发
HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,它们被用得十分广泛。 它们被用来组合一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来,见CSS...
简单的说,HTML只是赋予内容的方法,大部分HTML标签都有其自已的特别意义(标签p创建段落,h1标签创建标题等等)的,但是,span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。 但实际上,与CSS结合起来后,它们就被应用得十分广泛。 它们被用来组合一大块的HTML代码并赋予一定的信息,大部分用类属性class...
标签: Web开发
WEB标准 是一系列标准的集合,并不是仅DIV CSS布局就可以实现。以CSS网页布局只是标准的基础之一。DIV CSS布局只是一种通俗的称呼罢了。而我们学习的目标在于以XHTML建立良好的语义化的结构,结合CSS最大程度使表现与内容相分离。 一位网友对W3C标准、重构与CSS布局的理解: 不知道从什么时候开始,在网络上到处可以看到div css,...
标签: Web开发
WEB标准 是一系列标准的集合,并不是仅DIV+CSS布局就可以实现。以CSS网页布局只是标准的基础之一。DIV+CSS布局只是一种通俗的称呼罢了。而我们学习的目标在于以XHTML建立良好的语义化的结构,结合CSS最大程度使表现与内容相分离。 一位网友对W3C标准、重构与CSS布局的理解: 不知道从什么时候开始,在网络上到处可以看到div+...
标签: Web开发
先看一段代码: div id="top"Hello Phoenix!/div 其中用到了id属性。对应CSS中的 #top{} 再看一段代码: div class="bottom"a href="#"Hello Phoenix!/a/div 其中用到了class属性。对应CSS中的 .bottom a{} 根据CSS2.0手册规定,伪类中就包括了a,例二中就是通过CSS控制超级链接 a 的属性,然后在div中定义该区域的a对应的类名。 因此,...

经验教程

654

收藏

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