<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. hdu 2101

    #include <stdio.h> int main() { int a,b; while(scanf("%d%d",&a,&b)!=EOF) { i ...

  2. 关于为什么RAID5往往掉一个盘后第二个盘也立刻挂掉的原因分析

    很多人遇到过服务器RAID5挂掉,往往掉一个盘后,第二个盘也立刻挂掉. 大家都知道RAID5 一次允许一个盘缺失, RAID 5也是以数据的校验位来保证数据的安全,但它不是以单独硬盘来存放数据的校验位 ...

  3. 关于Xcode7的HTTP请求不到网络的问题

    ---恢复内容开始--- Xcode7发现网络请求失败, 其他一切都可以, 有网就是提示没有网络, 请求不到, 查询得知 iOS9引入了新特性 APP Transport Security (ATS: ...

  4. java泛型方法

    Tool.java package cn.stat.p9.fanxing.demo; public class Tool<QQ> {//不确定类型时可以用泛型 private QQ q; ...

  5. C#方法的重载

    方法的重载 参数不同,个数可以相同 参数相同,个数不能相同 static void Main(string[] arr) { Console.WriteLine(M(,)); Console.Read ...

  6. IIS中启用gzip压缩（网站优化）

    HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的 ...

  7. MySQL按照汉字的拼音排序(转)

    按照汉字的拼音排序,用的比较多是在人名的排序中,按照姓氏的拼音字母,从A到Z排序: 如果存储姓名的字段采用的是GBK字符集,那就好办了,因为GBK内码编码时本身就采用了拼音排序的方法(常用一级汉字37 ...

  8. Activiti工作流学习-----基于5.19.0版本(8)

    8.1.5 Start Event 继续上一篇的事件的分享笔记,Start Event指明该处是流程开始,至于开始事件的类型(消息到达开始,指定的事件循环开始等),定义如何开始是在开始事件圆圈图标里面 ...

  9. C/C++ char和int的区别

    字符字面值一般是用一对单引号来表示.char类型一般就是用字符字面值来初始化.赋值.由于char类型的是单字节长度,当给char类型的变量用字符字面值赋值时,当单引号里面的内容超过一个字节时,系统会自 ...

  10. QQ截图时窗口自动识别的原理（WindowFromPoint, ChildWindowFromPoint, ChildWindowFromPointEx,RealChildWindowFromPoint）

    新版的QQ在截图时加入了窗口自动识别的功能,能根据鼠标的位置自动画出下面窗口的轮廓.今天有人在论坛上问起这个问题,下面我们来探讨这个功能的实现原理. 首先我们要明白截图软件的基本原理,截图时实际上是新 ...