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. 【小顶堆的插入构造/遍历】PatL2-012. 关于堆的判断

    L2-012. 关于堆的判断 时间限制   将一系列给定数字顺序插入一个初始为空的小顶堆H[].随后判断一系列相关命题是否为真.命题分下列几种: “x is the root”:x是根结点: “x a ...

  2. maya 在 pymel 中运行 mel

    maya 在 pymel 中运行 mel 前言 maya mel 自身定义了很多有用的方法,当我们用 pymel 开发的时候,不想重新写一遍 mel 已经有的功能,那么就可以在 pymel 中运行 m ...

  3. java中使用redis --- List列表的简单应用

    1.Dos中启动server端 2.idea中启动client端 public class RedisTest01 { public static void main(String[] args){ ...

  4. Selenium常用API的使用java语言之15-警告框处理

    在 WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用switch_to_alert()方法定位到alert/confirm/pro ...

  5. 如果解释Python，什么是.pyc文件？

    我已经了解Python是一种解释型语言......但是,当我查看我的Python源代码时,我看到.pyc文件,Windows将其识别为“编译的Python文件”. 这些来自哪里? #1楼 Python ...

  6. 使用unittest测试（基础一）

    #导入unittest单元测试框架 ##用例的方法前缀必须要以 test 开头的 #这是用来组织用例的 import unittest class TestDBQB(unittest.TestCase ...

  7. centos 安装mysql5.7.18.tar.gz

    1.解压mysql.tar.gz tar -zxvf mysql--linux-glibc2.-x86_64.tar.gz  2.添加mysql用户组和mysql用户,命令如下: groupadd m ...

  8. LOJ P10151 分离与合体 题解

    Analysis 区间dp+记录路径 用dfs倒着找倒数第几次合并 #include<iostream> #include<cstdio> #include<cstrin ...

  9. java类加载和对象初始化

    对象初始化过程:  1.首先,初始化父类中的静态成员变量和静态代码块,按照在程序中出现的顺序初始化:  2.然后,初始化子类中的静态成员变量和静态代码块,按照在程序中出现的顺序初始化:  3.其次,初 ...

  10. learning scala dependency injection

    println("Step 1: Create a trait which knows how to do create, read, update and delete operation ...