<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. （转）介绍几个C#正则表达式工具

    推荐三个C#正则表达式工具,理由如下 第一个C#正则表达式工具,REGEX 这个C#正则表达式工具优点是中文的,提供了一些示例 第二个C#正则表达式工具,REGEXBUDDY 这是一个真正专业的REG ...

  2. excel运行最多行数

    2003及以前版本为65536(即6万多)行,256列2007版:1048576(即1百零多万)行,16384(即1千多)列

  3. 使用Alcatraz为Xcode安装XActivatePowerMode插件, 从此敲代码逼格大大滴~

    Alcatraz 是一款 Xcode的插件管理工具,可以用来管理XCode的 插件.模版以及颜色配置的工具. 关于Alcatraz的安装,这里有一篇不错的博文,请参考安装:http://www.cnb ...

  4. C#摇奖程序

    private void Form1_Load(object sender, EventArgs e) { //取消跨线层访问控件的判断 Control.CheckForIllegalCrossThr ...

  5. sql 查找数据库中某字符串所在的表及字段

    declare   @str   varchar(100)     set   @str='是否严格控制'     --要搜索的字符串         declare   @s   varchar(8 ...

  6. ie6下：png图片不透明 和 背景图片为png的节点的内部标签单击事件不响应

    1.png图片不透明 少量图片时:使用滤镜: _background:none; _filter:prodig:DXImageTransform.Microsoft.AlphaImageLoader( ...

  7. 接私活，得有套好框架，.net快速开发神器

    同一家公司的同事,拿同样的工资,以前他在用肾机,我还在用诺记.吃饭的时候他是买单王,我在想这家伙应该没存什么钱吧.结果前段时间他买了个沃尔沃S60L,可我一套省城小三房的首付都还没凑齐. 他说他经常在 ...

  8. MySQL数据库中日期中包涵零值的问题

    默认情况下MySQL是可以接受在日期中插入0值,对于现实来说日期中的0值又没有什么意义.调整MySQL的sql_mode变量就能达到目的. set @@global.sql_mode='STRICT_ ...

  9. lpc1788控制步进电机28BYJ-48

    下面直接上代码: #include "lpc177x_8x.h" #include "lpc177x_8x_clkpwr.h" #include "l ...

  10. $rootScope

    参考地址 https://docs.angularjs.org/api/ng/type/$rootScope.Scope angular 的scope一般上都是有继承关系的,也就是说可以通过原型访问到 ...