div和span标签的区别

div  是块级元素标签，独占一行，后面跟的内容换行显示

span  是内联元素标签，后面可以跟其他显示内容，不独占一行

display属性可以改变内联元素和块级元素的状态，实现两种元素的互换

1.div变成内敛元素

代码展示

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="background-color: turquoise;">123123</div>

    <span style="background-color: red;">123123</span>

</body>

</html>

显示效果如图

添加给div标签添加属性display属性：inline，将div变成一个内联元素

代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="background-color: turquoise; display: inline">123123</div>

    <span style="background-color: red;">123123</span>

</body>

</html>

显示效果

2.span变成块级元素

举例：三个span标签是

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <span style="background-color: turquoise;">123123</span>

    <span style="background-color: red;">123123</span>

    <span style="background-color: blue;">123123</span>

</body>

</html>

显示如图

给span添加display属性：block

代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <span style="background-color: turquoise;">123123</span>

    <span style="background-color: red; display: block">123123</span>

    <span style="background-color: blue;">123123</span>

</body>

</html>

显示结果

div和span显示在同一行的更多相关文章

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

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

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

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

  3. DIV与SPAN的区别

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

  4. div、span

    1.Html区块元素 HTML可以通过<div>和<span>将元素组合起来 大多数HTML元素被定义为块级元素或内联元素, 而块级元素在浏览器显示时,通常会以新行来开始(或结 ...

  5. 块和内嵌div和span

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. DIV 和 SPAN 区别

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

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

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

  8. div和span元素的区别

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

  9. 课时90.div和span（掌握）

    为什么在这里讲解div和span呢,而不在html中讲解呢? 因为在我们的开发中div和span一般是配合css来使用的,来完成一定的效果,来设置一些属性,在前面我们没有学习css,所以体会不到它的效 ...

随机推荐

  1. 面向对象中特殊方法的补充、isinstance/issubclass/type、方法和函数、反射

    一.面向对象中特殊方法的补充 1.__str__ 能将对象名改成你想要的字符串,但是类型还是类 class Foo(object): def __init__(self): pass def func ...

  2. angular ionic 解决微信页面缓存问题

    # 在路由对应的页面路径后面加时间戳 .state('viewName', { url: '/viewName', cache: false, templateUrl: function(){ ret ...

  3. 学到了林海峰,武沛齐讲的Day24-完 对象和实例

    学到这里估计就是坎了...日志都不想写了.. 对象和实例

  4. spring boot， 容器启动后执行某操作

    常有在spring容器启动后执行某些操作的需求,现做了一个demo的实现,做一下记录,也希望可以给需要的同学提供参考. 1.spring启动后,以新线程执行后续需要的操作,所以执行类实现Runnabl ...

  5. ROStopic 通信方式

    操作演示,对 topic 通信方式的理解请看:点击打开链接 开启终端,运行 roscore 新开一个终端(已经安装好(ros-<distro>-ros-tutorials 包,否则运行  ...

  6. Intellij IDEA常用操作

    1.DEBUG过程中查看指定表达式的值(alt+左键) 2.DEBUG过程中查看指定表达式的值的另一个方法(ctrl+u) 这个快捷键会弹出一个对话框,直接按回车的话显示选中表达式的值,还能在输入框中 ...

  7. 10月清北学堂培训 Day 4

    今天是钟皓曦老师的讲授~ 今天的题比昨天的难好多,呜~ T1 我们需要找到一个能量传递最多的异构体就好了: 整体答案由花时间最多的异构体决定: 现在的问题就是这么确定一个异构体在花费时间最优的情况下所 ...

  8. 激活 phpstorm2019.1 win10

    首先添加以下内容到c:\windows\system32\drivers\etc\hosts 文件 0.0.0.0 account.jetbrains.com 0.0.0.0 www.jetbrain ...

  9. Arrays.toString的作用

    Arrays.toString()的作用是用来很方便地输出数组,而不用一个一个地输出数组中的元素. 这个方法是是用来将数组转换成String类型输出的,入参可以是long,float,double,i ...

  10. 小程序wx.showLoading的使用

    比如说在用户点击登录的时候,为了防止用户点击点第二次,可以加一个loading,在请求结束之后就关闭