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. P1330 封锁阳光大学[搜索+染色]

    题目来源:洛谷 题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图 ...

  2. 【线上监控】日志上报bug处理方式总结

    说明:若直接在网站看觉得字体太小,可以下载下来后放大看会更加清晰.不会失真. 目前总结到此,后期有改动,再次补充与总结

  3. 如何在vscode中用standard style 风格去验证 vue文件

    1 JavaScript Standard Style简介 本工具通过以下三种方式为你(及你的团队)节省大量时间: 无须配置. 史上最便捷的统一代码风格的方式,轻松拥有. 自动代码格式化. 只需运行 ...

  4. Jmeter之JSON Extractor

    SON Extractor的作用: 对于处理json格式的response,使用SON Extractor来提取数据是更方便的.  SON Extractor语法: 同时提取多个数据: Names o ...

  5. SQL:自增主键的获取@@IDENTITY 和 SCOPE_IDENTITY 的区别

    @@IDENTITY 返回当前会话所有作用域的最后一个ID SCOPE_IDENTITY() 返回当前作用域的最后一个ID 返回上面语句执行后产生的自增主键,这个是目前最可靠的方式: insert i ...

  6. RS-232串口通信简介

    1969年,美国电子工业协会将RS-232定为串行通信接口的电器标准,该标准定义了数据终端设备DTE(Date Teriminal Equipment)与数据通信设备DCE(Data Communic ...

  7. Manthan, Codefest 19

    目录 Contest Info Solutions A. XORinacci B. Uniqueness C. Magic Grid D. Restore Permutation E. Let The ...

  8. Count on a tree 树上主席树

    Count on a tree 树上主席树 给\(n\)个树,每个点有点权,每次询问\(u,v\)路径上第\(k\)小点权,强制在线 求解区间静态第\(k\)小即用主席树. 树上主席树类似于区间上主席 ...

  9. 正则re.complie作用

    封装一个原本重复使用的正则表达式 prog = re.compile(pattern) result = prog.match(string)

  10. 爬虫之获取猫眼电影10W评论

    第一步 打开一个电影的评论界面: 哪吒之魔童降世:https://maoyan.com/films/1211270 我们发现这里只显示10条评论,而我们需要爬取10w条数据,所以不能从此页面进行抓包, ...