（一)span和div功能区别
span和div区别在于，div是一个块级元素，它包含的元素会自动换行。而span是行内元素，在它的前后不会换行。
span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。
（二）span和div使用区别
span元素宽度是被包围的内容宽度决定，不建议给span设置宽度属性width，可以给span设置margin值，设置与父元素之前的距离。
span可以通过css声明（display:block）转换为块元素，想对一行中的文字或单独设置样式，而又由不需要换行的条件下又不影响其他行内其他内容，span可以很好解决这些问题
扩展资料（一）<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的特定的格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素同时应用 class 和 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的特定的元素。
（二）SPAN技术主要是用来监控交换机上的数据流，大体分为两种类型，本地SPAN和远程SPAN 实现方法上稍有不同。 利用SPAN技术我们可以把交换机上某些想要被监控端口（以下简称受控端口）的数据流COPY或MIRROR一 份，发送给连接在监控端口上的流量分析仪
参考资料百度百科-DIV
百度百科-SPAN
div是块级元素，span是行内元素
div、p、h1~h6之类的块级元素默认情况下在他门后面的元素会被挤到下面去换行，而span行内元素就不会换行，还是在一行。你清楚了这个就大概知道什么时候该用什么了。例子：
代码：
<p>这里要<div>换行</div></p>
结果：
这里要
换行
------------------------------------
代码：
<p>这里不<span>换行</span></p>
结果：
这里不换行
还有个常见情况是比如：
<p>
一段文字是蓝色，我希望中间有两个字是<span>红色</span>的突出一下
</p>
假设p的样式是color:blue;，而文字中需要突出的“红色”两个字又不是个链接，就可以加个span，给span加上样式：color:red;
还有些特殊用法，你摸清楚了上面2个用法慢慢的就会明白了。
加个隐藏传送按钮<input type='hidden' value='你要传送的内容' name='aa'>
用$_POST['aa']接收
内容不是定值的话 可以设变量$a='内容'; 然后value=<=$a>就可以随意传送了。。。
SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。
<span>SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，<span>标识符允许你将一个段落分成不同的部分。 还有一个标识符具有类似的功能，<div>DIV也被用来在HTML文件中建立逻辑部分。但与<div>SPAN不同，<div>工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。
搞了半天，总算把它提取出来：
<html>
<head>
<meta >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
#b {
text-align: center;
display: none;
}
</style>
<script>
var c;
function edit(a) {
c = a;
documentgetElementById('a')styledisplay = 'none';
documentgetElementById('b')styledisplay = 'block';
var input1 = documentgetElementById('input' + a);
var input3 = documentgetElementById('input3');
input3value = input1value;
}
function ok() {
documentgetElementById('a')styledisplay = 'block';
documentgetElementById('b')styledisplay = 'none';
var input0 = documentgetElementById('input' + c);
var input3 = documentgetElementById('input3');
input0value = input3value;
}
function submit() {
var input1 = documentgetElementById('input1');
var input2 = documentgetElementById('input2');
var span1 = documentgetElementById('span1');
var span1 = documentgetElementById('span1');
span1innerHTML = input1value;
span2innerHTML = input2value;
}
</script>
</head>
<body>
<div id="a">
<table align="center">
<tr>
<td>姓名</td>
<td><input type="text" id="input1" placeholder="请输入" />
<a href="javascript:edit(1)">编辑</a>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" id="input2" placeholder="请输入" />
<a href="javascript:edit(2)">编辑</a>
</td>
</tr>
<tr>
<td></td>
<td><button onclick="submit()">提交</button></td>
</tr>
</table>
<table align="center" border="1">
<tr>
<td>姓名</td>
<td><span id="span1"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td><span id="span2"></span>
</td>
</tr>
</table>
</div>
<div id="b">
<input type="text" id="input3" placeholder="请输入" /><button onclick="ok()">确定</button>
</div>
</body>
</html>
以上就是关于DIV和span的区别全部的内容，包括:DIV和span的区别、DIV和span还有p标签应该怎么用、提交表单的时候。能否把网页的某一部分内容也给提交上去等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）