CSS中SPAN和DIV的区别

houzimanjjt

2010-08-30

本文和大家重点讨论一下CSS中SPAN和DIV的区别，SPAN和DIV的区别在于，SPAN是行内元素，SPAN的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

CSS中SPAN和DIV的区别

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

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

　代码:

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

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

　效果:

span div css css样式

houzimanjjt

0 关注 0 粉丝 0 动态

相关推荐

JS的dom获取span和div图层内容

div和span都是图层，每一个图层都是独立的单元，独立的块对象所以他们可以采用很好的进行网页的布局[layout]div灵活 table固定div独占一行 span不会独占一行获取dom对象设置div中的html代码 innerHtml属性不只是在di

luvhl 2019-12-29

Html的label和span的区别

从最终效果来看,label与span标签显示方式及作用都一样的但由于label中有for属性的存在,也有着决定性的不同。label标签通常是写在表单内的，他与一个普通的span最大的不同，就是可以和表单元素配对，比如文本框，单选框，复选框。将lable改成

玫瑰小妖 2020-01-29

web前端入门到实战：HTML-div和span标签

<style> .head{ width: 980px; height: 100px; background: red; margin: auto;} .logo{ width: 280px; height: 50px; background:

林大夏 2019-12-29

重学前端学习笔记（四）--div和span不是够用吗？

HTML语义：div和span不是够用了吗？

RainyX 2019-07-01

CSS:span元素margin-top无效的根源

span默认是行属性，而div默认是块属性。

kaiya0 2015-06-16

jQuery 获取div下的所有span的属性，并循环

varname=$(obj).text();varuserid=$(obj).attr("userid");varattrUser=newArray();//alert($("#user1").find("

handsomezsc 2015-03-25

[CSS]CSS中使用span和div遇到的问题

一. span和div的区别1.span是行级元素，div是块级元素2.span占用的宽度是内容的宽度，而div默认是一行。所以一般在页面中，只有一行或不到一行文字用span，元素占据多行时用div。四. 总结对于span和div都用时，同时span元素设

impress 2019-06-27

HTML 中的 span 标签标准用途的讨论（样式+交互）

无语义行内元素。在段内定义与该段样式不同的内容的样式。可以通过定义该class使其显示为一个箭头。像这种情况，给<div><h1>等再加一个<span>就可以解决。在某些元素后面再加上其他的不同格式的内容，但不想它到下一

zwq 2013-06-26

jQuery 修改 span 里的内容

varmyvalue='页码：';$(this).html(myvalue);});});myOnload();

超级赛亚人 2012-12-03

如何给span设置宽度(width)？

在网页中，如何给 span 元素设置宽度？很简单嘛，假定宽度为 100 像素，用 css 设置 width:100px。如果你认为这个答案正确，就请继续往下看；否则，你可能已经知道了答案。现在，你可以尝试一下，你会发现这个宽度设置根本就不起作用。因为 wi

hlfsunshine 2012-06-17

如何设置HTML span 的宽度

这看上去是个很简单的问题，似乎用style中的width属性就可以。通过试验以后发现，无效，无论是在Firefox还是IE中都无效。通过查阅CSS2标准中关于width的定义发现，原来CSS中的width属性并不总是有效的，如果对象是inline对象，wi

niehanmin 2012-04-20

HTML中div和span两个标签的区别

块元素相当于内嵌元素在前后各加一个<br>换行。其实，块元素和行内元素也不是一成不变的，只要给块元素定义 display:inline，块元素就成了内嵌元素，同样地，给内嵌元素定义了display:block就成了块元素了。例如，要让图片成为“

帅的相对论 2011-11-18

span边框显示不全

遇到一个span的css的边框显示不全。必须设置span的行高，才能全部显示。类似的问题在超链接css格式里也遇到过，当时没解决，估计也是这个原因。

切慕溪水 2011-04-16

WEB innerHTML中div 和span

今天开发中涉及到对一个层的信息控制，就是控制一个层中显示什么信息，查找资料才知道使用innerHTML属性来控制层的值，这个innerHTML跟表单里面的value属性有点类似，能够控制层的显示值。比如说我一个div层里本来没有值，我处罚一个事件后要显示值

zhangpeng 2011-02-24

CSS中如何把Span标签设置为固定宽度

实际验证结果：IE6 OK， FIREFOX 3 OK。display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性；display:inline-block;——“全”可定制属性的元素特性；可以采用下面方法实现同行且居右对齐。

每天积累一点点 2011-02-18

js获取html的span标签的值方法(超简单)

alert("x1="+x1);alert("x2="+x2);

CommputerMac 2019-05-07

浅谈jquery中delegate()与live()

delegate() 方法为指定的元素添加一个或多个事件处理程序例如给id是showspan的div中的span标签添加事件。//效果就是点击一个段落<div id="showspan">中span标签将在span标签后面添

xiongfeng 2019-04-21

jquery提取元素里的纯文本不包含span等里的内容

}); nodeType元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9

87941037 2013-09-30

探究Html中DIV和Span有何不同

在网页设计中，我们经常用到DIV和Span,但是常常有个疑惑，这两个标签：DIV和Span的区别到底是什么？DIV是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过DIV来布局定位网页中的每个区块。DIV和 Span元素最大的

烟汐忆梦 2010-09-10

CSS代码结构div和span初探

你对CSS代码结构div和span的使用是否熟悉，我们在使用CSS规划网页结构时通常会用到div，div是有语意的，它不象h1或ul等那些标签的语意那么明确而已，div的语意是division，英文的意思是区分、分开、部分。即用它来分割文档的不当部分。我们

林一天 2010-09-03

houzimanjjt

W3CSchool教程: HTML 教程; CSS 教程; Bootstrap 教程; Javascript 教程; jQuery 教程

后端教程: C 教程; Java 教程; PHP 教程; Python 教程; Go 教程

移动开发: Android 教程; Swift 教程; Kotlin 教程; jQuery Mobile 教程; ionic 教程

关于我们: 新闻动态; 联系方式; 招聘英才; 安科实验室; 帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号京公网安备11010802014868号