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. Android adb的一些用法

    adb查看包名/Activity名 adb shell "logcat | grep START" adb shell dumpsys activity | find “mFocu ...

  2. npm link的使用

    npm link的使用 https://www.jianshu.com/p/aaa7db89a5b2

  3. Jenkins 参数化构建（Git Parameter）

    由于我们在测试过程中,可能需要在多个测试环境跑用例,这个时候就需要jenkins参数化了. Jenkins参数化一般常用的有两种方式:Choice和String Parameter两种 (1)Choi ...

  4. java继承（implements与extends）总结

       版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/weixin_39938767/article/details/80056922 关键字impl ...

  5. MySQL 新建用户并赋予权限

    创建一个用户: create user 'oukele'@'%' identified by 'oukele'; 提示下面所列出的信息的话,得刷新一下权限表 The MySQL server is r ...

  6. jmeter md5加密请求参数

    实际的接口测试过程中,再发生http之前有可能需要对某些参数(或某几个参数的组合)进行md5加密 在jmeter中可通过两种方式来实现md5加密 beanshell实现md5加密 在org.apach ...

  7. 02_View

    1.View 1.基于类的视图 Class-based Views REST framework提供APIView是Django的View的子类 发送到View的Request请求:是REST fra ...

  8. sql server 游标的基本用法

    DECLARE @Id NVARCHAR(MAX) DECLARE @UserName NVARCHAR(MAX) DECLARE @Password NVARCHAR(MAX) DECLARE @N ...

  9. QT项目之创建.pri文件

    做大项目的时候,有很多.h和.cpp文件,会很繁琐.就需要.pri文件夹,将大项目分解成一个个的子项目,方便理清思绪和后期维护. 废话不多说,直接上过程! 第一步:新建一个项目.如图,选择choose ...

  10. 四川大学第二届SCUACM新生赛（同步赛）题解

    周末没事干,就不要脸地去一边吃饭一边看学弟沈阳拿银一边水了个比赛,水都水了,简单写个题解. 比赛链接 A,丁姐姐喜欢Fibonacci.签到1,斐波那契%3 1 1 0 1 1 0 1 1 0..., ...