div与span区别及用法

原创 2015年11月17日 19:31:23

以下是在没有对开发网页页面设置css样式时候情况下,系统默认情况下的介绍
div与span区别
div占用的位置是一行,
span占用的是内容有多宽就占用多宽的空间距离
,说明如下图

分析:从上图很容易知道“我是内容一;用的div”和“我是内容二;用的div”两个内容外部用的是<div>标签,他们得到样式是占用了一排空间(相当于换行一样);而“我是内容三;用的span”和“我是内容四;用的span”则,文字内容有多宽,就占用多宽距离,使用<span>标签和不使用一样效果。 copyright www.divcss5.com divcss5

小结:在网页开发的时候使用div和span都可以,通常可以理解为没有什么区别。但注意的是div占用一行,span不会占用一行,内容占多大宽度,span就有多宽。

扩展与提升
div内的span无需命名css选择器伪类,例子如下
如果div的class为yangshi,则对内的span设置css属性则,代码如下
.yanshi span{属性及属性值}
图例实例演示
 

 


分析上图:可以得出span无需再命名伪类名,直接使用css继承属性来对span设置css样式。这里本来div内的样式为对文字设置蓝色字,但是又通过继承方式设置了span的样式为文字为红色
版权声明:本文为博主原创文章,未经博主允许不得转载。

div与span区别及用法

在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法。新手在使用web标准(div css)开发网页的时候,遇到第一个问题是div与span有什么区别,什么时...
  • cao478208248
  • cao478208248
  • 2014年05月13日 16:19
  • 1667

HTML区块元素<div>及内联元素<span>

HTML区块分//有时候也可以用来制作网页,通常跟CSS联合起来制作,也可以直接在HTML里面设置属性。 ...
  • sweetga
  • sweetga
  • 2015年04月08日 10:32
  • 1358

Vue.js中v-bind v-model的使用和区别

v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据...
  • itKingOne
  • itKingOne
  • 2017年04月17日 14:12
  • 7330

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

  • 2011年12月09日 23:44
  • 153KB
  • 下载

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

  • 2009年11月21日 20:00
  • 21KB
  • 下载

初学HTML用法大全指导(五)html建立网页中的表单与DIV、SPAN分块

上一篇博客我们讲了html脚本语言中超链接的创建与使用,这一篇博客我们来聊一聊web网页中常用的表单的建立,我们在登录一个新的网站时想成为这个网站的VIP会员或者普通用户时常常面临着各种信息的登记,以...
  • u013132035
  • u013132035
  • 2017年01月08日 21:13
  • 833

html几个重要标签用法(div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em)

一段时间以来,发现有很多人XHTML都不会用,不光是普通的初学者,有的程序员都不是很清楚该怎么写这个XHTML,我这里呢算是把一些常见的应用问题做一个总结,也算能使得大家能在沟通,合作上能形成默契。 ...
  • pp523810076
  • pp523810076
  • 2017年07月15日 11:54
  • 418

HTML中Div、span、label标签的区别

div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自...
  • cui_angel
  • cui_angel
  • 2012年06月19日 16:28
  • 41503

行内元素span和块级元素div的区别

行内元素span和块级元素div的区别
  • u012934551
  • u012934551
  • 2017年01月18日 19:55
  • 415

CSS SPAN和DIV的区别

CSS SPAN和DIV的区别SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后...
  • final_vip
  • final_vip
  • 2011年02月25日 22:25
  • 278
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div与span区别及用法
举报原因:
原因补充:

(最多只允许输入30个字)