html span和div的区别
div与span区别及用法
div与span区别及用法
DIV与SPAN区别及div与san用法篇
接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法。新手在使用web标准(div css)开发网页的时候,遇到第一个问题是div与span有什么区别,什么时候用div,什么时候用span标签。
目录
特点与区别
小结
知识扩展
案例效果演示
一、DIV与SPAN的区别与特点 - TOP
以下是在没有对开发网页页面设置css样式时候情况下,系统默认情况下的介绍
div与span区别
div占用的位置是一行,
span占用的是内容有多宽就占用多宽的空间距离,说明如下图
sapn标签使用案例截图
分析:从上图很容易知道“我是内容一;用的div”和“我是内容二;用的div”两个内容外部用的是
二、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区别及用法介绍讲解技术文章。
html span和div的区别的更多相关文章
- 网页中Span和Div的区别
它们被用来组合一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来,见CSS中级指南的类和id选择符. span和div的不同之处在于span是内联的,用在一小块 ...
- span和div的区别
<span> 在CSS定义中属于一个行内元素,在行内定义一个区域,也就是一行内可以被 <span> 划分成好几个区域,从而实现某种特定效果. <span> 本身没有 ...
- [CSS]CSS中使用span和div遇到的问题
一. span和div的区别 1.span是行级元素,div是块级元素2.span占用的宽度是内容的宽度,而div默认是一行.所以一般在页面中,只有一行或不到一行文字用span,元素占据多行时用div ...
- DIV与SPAN之间有什么区别
DIV与SPAN之间有什么区别 DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元 ...
- <div> <p> <span>的用法和区别
<div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用任何格式与其关联. 更重要的意义是在网页的动态实现过程中,对划分的区域统一处理,例如换背景色.字体等 ...
- span 与p 的区别,以及内联元素的作用
1.一般标签都有语义,p标签是指一个段落,而且默认是一个块级元素,span是一个行内元素的代表,没有什么意思,一般可以放文字等行内元素,例如<p>这是一段简介内容这是一段 <span ...
- “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法
最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...
- html中table的画法及table和div的区别
最近项目中,根据客户的要求需要在页面上展示各种报表什么的,各种表格的都会出现.这里也将table的画法,做一下总结.办法虽笨但很实用.这也是从高人那里学来的,总之是屡试不爽啊.就以下面的表格为例. 若 ...
- [js]使用百度编辑器uediter时遇到的一些问题(span,div等被过滤)
在使用uediter编辑html代码的时候,div,span等标签会莫名其妙的被过滤掉,然后上网查资料,改了点配置: 1:在ueiter.all.js中找到allowDivTransToP me.se ...
随机推荐
- 散度(Divergence)和旋度(Curl)
原文链接 散度(Divergence) 散度的讨论应从向量和向量场说起.向量是数学中研究多维计算的基本概念.比如,速度可以分解为相互独立的分量,则速度就是一个多维的向量.假如空间中的每一个位置都有一个 ...
- deep learning书的阅读
最近坚持读书,虽然大多数读的都是一些闲书,传记.历史或者散文之类的书籍,但是也读了点专业书.闲书是散时间读的,放车里,有时间就拿起来读读,专业书则更多的靠得是专注.因为我给自己的规定是一定时间内读完几 ...
- 前端css盒模型及标准文档流及浮动问题
1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...
- Ubuntu 16.04安装docker(2018年最新)
参考https://blog.csdn.net/bingzhongdehuoyan/article/details/79411479 http://www.cnblogs.com/lighten/p/ ...
- Pop–实现任意iOS对象的任意属性的动态变化
简介 Pop 是一个可扩展的动画引擎,可用于实现任意iOS对象的任意属性的动态变化,支持一般动画,弹性动画和渐变动画三种类型. 项目主页: pop 最新示例: 点击下载 注意: 官方代码中,并不包含实 ...
- iOS网络图片缓存详解
在开发移动应用的时候比如Android,IOS,因为手机流量.网速.内存等这些因素,当我们的移动应用是针对互联网,并要频繁访问网络的话,对网络优化这块就显得尤为重要了. 比如某个应用要经常显示网络图片 ...
- 在windows7上配置xampp虚拟主机
在设置之前最好关闭xampp1.修改hosts文件进入C:\Windows\System32\drivers\etc目录,找到hosts文件.在# Localhost (DO NOT REMOVE) ...
- Python 初始—(多级字典)
字典中 嵌套字典 如同json 对象, data={ "msg":{ “xxx.com”:["a","b"] } } data.values ...
- Problem 1002-2017 ACM/ICPC Asia Regional Shenyang Online
网络赛:2017 ACM/ICPC Asia Regional Shenyang Online 题目来源:cable cable cable Problem Description: Connecti ...
- 【图论 思维】cf715B. Complete The Graph加强
zzq讲的杂题 题目大意 有一张$n$个点$m$条边的简单正权无向图,$S$到$T$的最短路为$L$,现在有一些边的边权未知,请输出任意一种满足题意的方案. $n,m\le 500000$ ...