div与span的区别:
div标签属于块级元素,span标签属于行内元素,使用对比效果如下:
 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>111</title>
<style>
div{
background-color: #CC99CC;
color: blue;
width: 400px;
}
span{
background-color: #CC99CC;
color: blue;
width: 400px;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>

另外,在html页面中,无法直接设置span的高度和宽度,如果需要改变其宽高,就需要将其转变为块体元素(block)或行内块体元素(inline-block):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>111</title>
<style>
.class1{
background-color: #CC99CC;
color: blue;
width: 400px;
height: 50px;
}
.class2{
background-color: #CC99CC;
color: blue;
width: 400px;
height: 50px;
display:block;
}
</style>
</head>
<body>
<span class="class1">示例</span>
<span class="class2">示例</span> </body>
</html>

div与span的更多相关文章

  1. CSS之div和span标签

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

  2. Div和Span标签显示与隐藏

    本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...

  3. [转]div与span区别及用法

    DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...

  4. DIV与SPAN的区别

    DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 详解:1 ...

  5. HTML 的 <div> 和 <span> 标签

    这篇文章里会涉及到两个术语,这里先明确一下: 块级元素,block level element 内联元素(或者叫行内元素),inline element 大多数 HTML 元素被定义为块级元素和内联元 ...

  6. "无意义"的div和span标签

    HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器.<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.如果与 C ...

  7. HTML <div> 和 <span>

    可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素. 编者注:“块级元素”译为 block ...

  8. div和span的区别

    <div>是一个块级元素,我们可以把它比喻成盒子,它没什么实际语义能用到很多地方,独占一行不能和其它元素在一行,它还能把<div>和<span>”装在盒子里”,主要 ...

  9. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

随机推荐

  1. myql查询创建表语句SHOW CREATE TABLE table_name

    技术背景:刚开始学习MySQL时候,有时偷懒,会用SHOW CREATE TABLE 表名\G来复制表创建语句,可是当运行的时候总会因为"表名和列名上有单引号",提示语法错误不能运 ...

  2. storm之8:并行度

    (一)storm拓扑的并行度可以从以下4个维度进行设置:1.node(服务器):指一个storm集群中的supervisor服务器数量.2.worker(jvm进程):指整个拓扑中worker进程的总 ...

  3. 微信php接入设计案列

    <?php namespace Home\Controller; use Think\Controller; use Com\Wechat; use Com\WechatAuth; class ...

  4. apache2.2 虚拟主机配置详解

    一.修改httpd.conf 打开appserv的安装目录,找到httpd.conf文件,分别去掉下面两行文字前面的#号. #LoadModule vhost_alias_module modules ...

  5. javascript回调函数

    function $$(f) { if (typeof f == 'function') {//f是一个函数 f(); } else { alert('not a function'); } } $$ ...

  6. DEDE常见的错误(转)

    1:dedecms文章录入的时候,如何控制文章重复.   在dede/article_add.php里面,加入该程序就OK了    if($cfg_check_title == 'Y'){      ...

  7. await使用中的阻塞和并发

    本文讨论,通过将Lambda还原成最普通的代码段,来解释上篇提出的疑问.并更正上篇中一些不太正确的写法.最后会给出无需等待Async方法返回值时,对Async方法使用await的建议,供大家参考.第一 ...

  8. pyenv简介——Debian/Ubuntu中管理多版本Python

    pyenv简介——Debian/Ubuntu中管理多版本Python MAY 21ST, 2016 12:00 AM | COMMENTS pyenv是管理Python版本的工具,它支持在多个Pyth ...

  9. 怎么加sudo权限

    安装好Debian后还不能使用sudo如果没有安装sudo,则在root用户下apt-get install sudo在root设置sudoers配制文件chmod +w /etc/sudoersvi ...

  10. 【学习笔记】【oc】类和对象及类的三大基本特征

    1.类和对象 类是抽象化,对象是具体化. (1)定义类: 分为两个步骤,类的声明:定义类的成员变量和方法:@interface 用于声明定义类的接口部分,@end表面定义结束:. 成员变量的定义:{} ...