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. BeanUtils--内省加强

    BeanUtils就是一个处理Bean的工具包.内部也是使用内省.但对内省做了加强. Bean的set |get不用再成对出现 核心类: BeanUtils. 1.导包

  2. hdu 1829 基础并查集，查同性恋

    A Bug's Life Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  3. A Linear Time Majority Vote Algorithm

    介绍一种算法,它可以在线性时间和常数空间内,在一个数组内找出出现次数超过一半的某个数字. 要解决这个问题并不难,可以使用排序或哈希,但是这两种算法都不能同时满足时间或空间的要求. 然而,该算法(A L ...

  4. Linux程序设计笔记

    使用size命令查看二进制文件时,结果并不一定和预测占用内存大小一致,因为可能存在内存对齐,导致内存字节数比实际的更多 在C语言中,字符串常量存放在text segment中,在C++中却是存储在da ...

  5. iBox v2.0 发布，Web化仿iOS7界面/交互的JavaScirpt库

    iBox2 是一个仿 iOS 7 界面/交互的 JavaScirpt 库,它运行在 webkit 内核的移动浏览器之上,依赖 iScroll5,帮助开发者构建更接近 iOS 体验的 WebApp. 伴 ...

  6. centos 6.5 安装阿里云的一键安装包(nginx+php5.4+mysql5.1)

    安装阿里云提供的Linux一键安装web环境全攻略,本想着会有最复杂 ,没想到阿里云工程师提供的包没有任何限制(开始以为只能在阿里去的主机上使用).开源的精神就是好(注:我是伸手党). 环境  vmw ...

  7. 关于Zend Framework 2中 Zend\Session的使用

    一直迷惑于zend\Session的使用,这个是Zend\Session的官方教程的中文版,http://zend-framework-2.yangfan.co/blog/556. 其中最重要的是关于 ...

  8. 《python基础教程》笔记之 条件语句和循环语句

    布尔变量 下面的值会被解释器看做假(false): False None 0 "" () {} [] 其它的一切都被解释为真. >>> TrueTrue>& ...

  9. 一次awk脚本的重构

    # 脚本功能说明: # . 检查URL中的域名是否是指定版本的域名 # . 对访问bid,authorid的游客身份排重,并累加其pv # 全局变量说明 # DOMIAN_LIST 是数组,key是要 ...

  10. Xamarin.Forms-webservices访问

    虽然xamarin.android/ios 均支持右键添加web引用方式引用webservices,但是xamarin.forms不支持此方式,而如果android/ios各做一套采用抽象方式实现则工 ...