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. MySQL进阶10--DML数据操纵预言: insert/delete/update --多表连接修改/.多表连接删除/多表连接查询-- truncate 和 delete的区别

    /* DML -- 数据操纵预言: insert/delete/update */ #一: 插入语句 /* 语法1: insert into 表名(列名,..,列名....) values(值1,值2 ...

  2. P1281 书的复制[二分]

    题目描述 现在要把m本有顺序的书分给k给人复制(抄写),每一个人的抄写速度都一样,一本书不允许给两个(或以上)的人抄写,分给每一个人的书,必须是连续的,比如不能把第一.第三.第四本书给同一个人抄写. ...

  3. 《AlwaysRun团队》第三次作业：团队项目的原型设计

    <AlwaysRun团队>第三次作业:团队项目的原型设计 项目 内容 这个作业属于哪个课程 [任课教师博客主页链接](https://home.cnblogs.com/u/nwnu-dai ...

  4. async/await中reject的问题

    promise 返回的 resolve 对象可能用 await 去接,但是 reject 无法用 await 接收到,所以要用 try catch 去处理 例如发送邮件的接口设置: async fun ...

  5. CSP2019 D1T3 树上的数 （贪心+并查集）

    题解 因为博主退役了,所以题解咕掉了.先放个代码 CODE #include<bits/stdc++.h> using namespace std; const int MAXN = 20 ...

  6. 07_gitee源码参考

    Django REST framework Tutorial 教程 码云:https://gitee.com/venicid/tutorial-api

  7. Color Highlight 鼠标放在 #f3f 上面其背景会变成相应的颜色的插件 DocBlockr自动补全注释

    不是  Color Highlighter    而是 Color Highlight  少了 er  颜色功能还是很爽的,找了好久 鼠标放在 #f3f 上面其背景会变成相应的颜色的插件 DocBlo ...

  8. 什么是php面向对象及面向对象的三大特性

    什么是面向对象? 面向对象编程,也就是我们常说的OOP,其实是面向对象的一部分.面向对象一共有3个部分:面向对象分析(OOA).面向对象设计(OOD).面向对象编程(OOP).我们现在将要学习的就是面 ...

  9. 前端逼死强迫症系列之javascript续集

    一.javascript函数 1.普通函数 function func(){ } 2.匿名函数 setInterval(function(){ console.log(123); },5000) 3. ...

  10. Mac下的PHP的配置与运行

    mac 下自带apache bogon:Documents macname$ apachectl -version Server version: Apache/ (Unix) Server buil ...