SPAN元素和DIV元素有什么区别
解决思路：
最明显的区别是：DIV是块元素，SPAN是内嵌元素。块元素相当于内嵌元素在前后各加一个<br>换行。其实，块元素和行内元素也不是一成不变的，只要给块元素定义display:inline，块元素就成了内嵌元素，同样地，给内嵌元素定义了display:block就成了块元素了。
具体步骤：
代码示例：
<style>
div,span{border:1px solid #000;margin:2}
</style>
<div>div1</div><div>div2</div>
<span>span1</span><span>span2</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)。例如，要让图片成为“层”，可以这样写代码：
<img src="demo.gif" style="posibion:absolute;left:20;top:20">
特别提示
本例代码运行效果如图2.1.6.3所示，为了更能说明问题，这里给块元素和内嵌元素都加了1像素宽的黑色实线边框，从图中可以看到，DIV默认为块元素，定义display属性值为inline后以内嵌元素显示，而SPAN默认为内嵌元素，定义display属性值为block后则以块元素显示。

＝＝＝＝＝＝＝＝
div>和<span>的区别

span:允许网页制作者给出一个样式表,但无须加在HTML元素之上,也就是说span是独立于HTML元素的.span在样式表做是做为一个标识符使用,而且也接受style class 和ID属性如<span class="xx">.....</span>
span是一个内联元素,它纯粹是为了应用样式表面成立的,所以当样式表无效时,它的存在也就没有意义了

DIV:基本上与span相似,或者说具有SPAN所有的功能,此外还具有SPAN不及的特色.DIV是一个块,也就是所谓的"容器",它具有自己独立的段落,独立的标题,独立的表格,就如<html>.....</html>一样包括了一切.如:

<div class="mydiv">
<h1>独立的标题</h1>
<p>独立的段落</p>
<table>......</table>
...................
</div>而这些SPAN是没有的!

SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元
素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。　　下面以一个实例
来说明这两个属性的区别。　　代码：　　＜span＞SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的
HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，＜span＞标识符允许你将一个段落分成不同的部分。 　　还有一个
标识符具有类似的功能，＜div＞DIV也被用来在HTML文件中建立逻辑部分。但与＜div＞SPAN不同，＜div＞工作于文本块一级，它在它所包
含的HTML元素的前面及后面都引入了行分隔。　　效果：　　SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是
围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。 　　还有一个
标识符具有类似的功能，
DIV也被用来在HTML文件中建立逻辑部分。但与
SPAN不同，
工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

Css span div的更多相关文章

  1. CSS之div和span标签

    div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...

  2. 【HTML】Intermediate1：Span&Div

    1.HTML is all bout applying meaning to content. The span & div tags apply no meaning at all=mean ...

  3. css span宽度和css span高度成功设置经验篇

    我们介绍两种情况下的对span宽度高度样式成功设置. 为了观察和实践CSS SPAN宽度和span高度成功设置,DIVCSS5新建一个css命名为“.divcss5”的盒子,设置css宽度为150px ...

  4. css实现div内凹角样式

    平常的开发中我们一般使用到圆角都是外凸的,即border-radius属性.而如果有内凹角的情况,我们一般的考虑实现方法有2种.一种是直接使用背景图片,一种是使用css. 用到的属性则是backgro ...

  5. css居中div的几种常用方法

    在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...

  6. css实现div的高度填满剩余空间

    css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...

  7. html中css、div命名规范

    html中css.div命名规范 1.类class的命名规范示例 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column ...

  8. CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

  9. CSS实现div居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. POJ 3279 Fliptile[二进制状压DP]

    题目链接[http://poj.org/problem?id=3279] 题意:给出一个大小为M*N(1 ≤ M ≤ 15; 1 ≤ N ≤ 15) 的图,图中每个格子代表一个灯泡,mp[i][j] ...

  2. 多线程synchronized用例解析

    当用synchronized来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码.即使在执行过程中,CPU切换到别的线程了,因为有锁的缘故,其他线程也不会进来执行代码,而 ...

  3. php中文乱码问题分析及解决办法

    中文乱码问题产生的原因,主要就是字符编码设置问题:             首先,mysql数据库安装的时候字符编码要选择正确,最好选择utf-8比较保险.如果安装时没有设置正确,找到mysql的安装 ...

  4. Kmeans聚类算法

    K-means也是聚类算法中最简单的一种了,但是里面包含的思想却是不一般.最早我使用并实现这个算法是在学习韩爷爷那本数据挖掘的书中,那本书比较注重应用.看了Andrew Ng的这个讲义后才有些明白K- ...

  5. MFC单选按钮

    先为对话框加上2个radio button,分别是Radio1和Radio2. 问题1:如何让Radio1或者Radio2默认选上?如何知道哪个被选上了? 关键是选上,“默认”只要放在OnInitDi ...

  6. 去掉input text后面的叉

    如题 input[type=text]::-ms-clear{ display: none; } input::-webkit-search-cancel-button{ display: none; ...

  7. Redis如何保存数组和对象

    个人建议使用PHP自带的序列化函数serialize和unserialize函数 我们可以封装一个自己的Redis类 <?php class MyRedis{ private static $h ...

  8. 命名空间“Microsoft”中不存在类型或命名空间名称“Office”(是缺少程序集引用吗?)

    通过引用这个解决,不同的的office版本,中间的版本号可能不同,如图所示:

  9. Object-C 自学笔记 - 1

    1.基本变量类型 类型 标示符 输出格式 整形 int %i 浮点 float %f 双精度 double %g 单字符 char %c 以上是基本类型,除此之外还有long, long long i ...

  10. UVALive 3027 并查集

    #include <cstdio> #include <queue> #include <cstring> #include <iostream> #i ...