div与span区别及用法

简介: DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法。新手在使用web标准(div css)开发网页的时候,遇到第一个问题是div与span有什么区别,什么时候用div,什么时候用span标签。

DIV与SPAN区别div与san用法

接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法。新手在使用web标准div css)开发网页的时候,遇到第一个问题是div与span有什么区别什么时候用div,什么时候用span标签

目录
  1. 特点与区别
  2. 小结
  3. 知识扩展
  4. 案例效果演示

一、DIV与SPAN的区别与特点   -   TOP

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


sapn标签使用案例截图

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

二、span标签小结   -   TOP

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

三、扩展与提升   -   TOP

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

四、图例实例演示效果   -   TOP


对span设置css样式截图

分析上图:可以得出span无需再命名伪类名,直接使用css继承属性来对span设置css样式。这里本来div内的样式为对文字设置蓝色字,但是又通过继承方式设置了span的样式为文字为红色。

希望divcss5网站总结的css案例对你有帮助,这里是关于div与span区别及用法介绍讲解技术文章。

目录
相关文章
|
11月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
11月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
2562 0
|
Web App开发 缓存 移动开发
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台 最近写了好多篇 Chrome 浏览器插件相关的文章,有十几二十篇,就想着构建个博客,用来放置相应的文章。 正好前段时间看到 VitePress 1.0.0 发布了,而且是用 markdown 写文章,正好写插件文章的时候文章都是 md 格式,所有用下这个然后顺便写一篇使用教程。 Chrome 插件开发博客地址:https://18055975947.github.io/extension/
260 0
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
前端开发
若依修改,配置了一个接口路径出现了,如何放通接口{ “msg“: “请求访问:/code/list,认证失败,无法访问系统资源“, “code“: 401}
若依修改,配置了一个接口路径出现了,如何放通接口{ “msg“: “请求访问:/code/list,认证失败,无法访问系统资源“, “code“: 401}
|
消息中间件 存储 容灾
共识协议的技术变迁 -- 既要“高”容错,又要“易”定序,还要“好”理解
这篇文章与读者朋友们好好聊一聊共识这个技术领域,期望能够让大伙儿对共识协议的前世今生以及这些年的技术演进有个大体了解。
21201 53
|
算法 安全 数据安全/隐私保护
C/C++学习 -- 分组加密算法(DES算法)
C/C++学习 -- 分组加密算法(DES算法)
445 0
|
存储 消息中间件 NoSQL
如何设置token有效期【5个应用场景分析+双token实现解析】
如何设置token有效期【5个应用场景分析+双token实现解析】
|
SQL 数据可视化 Oracle
JNPF可视化平台的搭建及使用
JNPF可视化平台的搭建及使用
707 0
|
JavaScript
VUE2使用echarts
echarts官方示例:http://www.echartsjs.com/examples/ 。
682 0
VUE2使用echarts