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

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>div</title>

    <style>

        div.b{width:500px}

        div.b span{color:blue}

        div.b div{float: right}

    </style>

</head>

<body>

<div class="b">

    <p>我是一个<span>被span包含的段落</span></p>

    <div>

        <p>我是在div里的div</p>

    </div>

</div>

</body>

</html>
*h1是块级元素的

<span>是行内元素，我们可以把它比喻成袋子，它也没有实际语义也能用到很多地方，如果没有样式它在视觉上和<p>一样,能和其它元素在一行，它的内容有多大宽度就有多宽，不能再里面添加<div>，它能把段落中的某一段”装起来”定义样式，能呈现很好的视觉效果。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>span</title>

    <style>

        div.a span{color:red}

    </style>

</head>

<body>

<div class="a">

    <ol>

        <li><span>2015.11.20</span>财务</li>

        <li>2015.11.20<span>人事</span></li>

        <li>2015.11.20销售</li>

    </ol>

    <ul>

        <li>我</li>

        <li><span>是</span></li>

        <li>谁</li>

    </ul>

</div>

</body>

</html>
*ol、li、ul是块级元素

div和span的区别的更多相关文章

  1. DIV与SPAN的区别

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

  2. css案例学习之div与span的区别

    代码: <html> <head> <title>div 标记范例</title> <style type="text/css" ...

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

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

  4. div与span区别及用法

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

  5. div和span、relative和absolute、display和visibility的区别

    一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...

  6. div与span

    div与span的区别: div标签属于块级元素,span标签属于行内元素,使用对比效果如下: <!DOCTYPE html> <html> <head lang=&qu ...

  7. DIV 和 SPAN 区别

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

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

    DIV与SPAN之间有什么区别 DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元 ...

  9. div和span元素的区别

    2个都是用来划分区间但是没有实际语义的标签,差别就在于div是块级元素,不会其他元素在同一行;span是内联元素,可以与其他元素位于同一行. DIV 和 SPAN 元素最大的特点是默认都没有对元素内的 ...

随机推荐

  1. sql server代理中作业执行SSIS包失败

    RT,执行失败了,总是只提示一句“以xxxx用户身份执行失败”,很难找原因. 引用 http://bbs.csdn.net/topics/300059148 Sql2005如何用dtexec运行ssi ...

  2. SQL存储过程笔记

    一.概述 存储过程(Stored Procedure)是一组为了完成特定功能的SQL 语句集,经编译后存储在数据库.用户通过指定存储过程的名字并给出参数(如果该存储过程带有参数)来执行它. 优点:   ...

  3. [c#]asp.net开发微信公众平台(7)前6篇的整体框架demo源码

    这里给出的demo是具备整体框架的微信公众平台源码, 所谓demo就是拿过去就可以直接演示使用的东西,  当然不会具备非常详细的具体到业务层面.数据层面的东西, 每个人都可以在此基础上自由发挥,  只 ...

  4. iOS分享 - 对象间的通信之delegate、notificationCenter与block

    在项目开发中,常常会涉及到对象之间的通信,而为了降低对象间的耦合,会采用delegate.notificationCenter.block三种方式来进行实现,对于他们的使用,也许大家都能熟练掌握,但是 ...

  5. FileStream操作文件读写

    FileStream fsRead = new FileStream(@"C:\Users\Administrator\Desktop\u.html",FileMode.OpenO ...

  6. c++回调实现

    回调是A将一个函数指针传给B,然后调用B,B在执行自身函数后,再在合适的时候执行A的这个函数指针,这样就能避免A和B的相互包含和链接,在大型项目中回调是一种打破循环依赖的常用技术. typedef v ...

  7. Fedora22没有i18n文件

    今天想修改Fedora22的系统语言,发现/etc/sysconfig/没有i18n 解决方法: dnf install system-config-language.noarch -y system ...

  8. ECSTORE2.0 下载 （变量标签）

    条目 用途 备注 coupon.mc.use_times 优惠券可用次数 - security.guest.enabled 是否支持非会员购物 - site.version version的最后修改时 ...

  9. (转载)Python装饰器学习

    转载出处:http://www.cnblogs.com/rhcad/archive/2011/12/21/2295507.html 这是在Python学习小组上介绍的内容,现学现卖.多练习是好的学习方 ...

  10. Spring ioc 原理

    java程序员都知道:java程序中的每个业务逻辑至少需要两个或以上的对象来协作完成,通常,每个对象在使用他的合作对象时,自己均要使用像new object() 这样的语法来完成合作对象的申请工作.你 ...